@import url(https://fonts.winshop.tw/css2?family=DM+Sans:wght@100..900&display=swap);@charset "UTF-8"; /*! * animate.css -https://daneden.github.io/animate.css/ * Version - 3.7.2 * Licensed under the MIT license - http://opensource.org/licenses/MIT * * Copyright (c) 2019 Daniel Eden */ @-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scaleX(1)}}@keyframes pulse{0%{transform:scaleX(1)}50%{transform:scale3d(1.05,1.05,1.05)}to{transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}@keyframes rubberBand{0%{transform:scaleX(1)}30%{transform:scale3d(1.25,.75,1)}40%{transform:scale3d(.75,1.25,1)}50%{transform:scale3d(1.15,.85,1)}65%{transform:scale3d(.95,1.05,1)}75%{transform:scale3d(1.05,.95,1)}to{transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{transform:translateZ(0)}10%,30%,50%,70%,90%{transform:translate3d(-10px,0,0)}20%,40%,60%,80%{transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}@keyframes headShake{0%{transform:translateX(0)}6.5%{transform:translateX(-6px) rotateY(-9deg)}18.5%{transform:translateX(5px) rotateY(7deg)}31.5%{transform:translateX(-3px) rotateY(-5deg)}43.5%{transform:translateX(2px) rotateY(3deg)}50%{transform:translateX(0)}}.headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}@keyframes swing{20%{transform:rotate(15deg)}40%{transform:rotate(-10deg)}60%{transform:rotate(5deg)}80%{transform:rotate(-5deg)}to{transform:rotate(0deg)}}.swing{transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{transform:scaleX(1)}10%,20%{transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{transform:scaleX(1)}}@keyframes tada{0%{transform:scaleX(1)}10%,20%{transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{transform:translateZ(0)}15%{transform:translate3d(-25%,0,0) rotate(-5deg)}30%{transform:translate3d(20%,0,0) rotate(3deg)}45%{transform:translate3d(-15%,0,0) rotate(-3deg)}60%{transform:translate3d(10%,0,0) rotate(2deg)}75%{transform:translate3d(-5%,0,0) rotate(-1deg)}to{transform:translateZ(0)}}@keyframes wobble{0%{transform:translateZ(0)}15%{transform:translate3d(-25%,0,0) rotate(-5deg)}30%{transform:translate3d(20%,0,0) rotate(3deg)}45%{transform:translate3d(-15%,0,0) rotate(-3deg)}60%{transform:translate3d(10%,0,0) rotate(2deg)}75%{transform:translate3d(-5%,0,0) rotate(-1deg)}to{transform:translateZ(0)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{transform:translateZ(0)}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{transform:skewX(.390625deg) skewY(.390625deg)}88.8%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{transform:translateZ(0)}22.2%{transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{transform:skewX(6.25deg) skewY(6.25deg)}44.4%{transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{transform:skewX(.390625deg) skewY(.390625deg)}88.8%{transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;animation-name:jello;transform-origin:center}@-webkit-keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}@keyframes heartBeat{0%{transform:scale(1)}14%{transform:scale(1.3)}28%{transform:scale(1)}42%{transform:scale(1.3)}70%{transform:scale(1)}}.heartBeat{-webkit-animation-name:heartBeat;animation-name:heartBeat;-webkit-animation-duration:1.3s;animation-duration:1.3s;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:scale3d(.3,.3,.3)}20%{transform:scale3d(1.1,1.1,1.1)}40%{transform:scale3d(.9,.9,.9)}60%{opacity:1;transform:scale3d(1.03,1.03,1.03)}80%{transform:scale3d(.97,.97,.97)}to{opacity:1;transform:scaleX(1)}}.bounceIn{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,-3000px,0)}60%{opacity:1;transform:translate3d(0,25px,0)}75%{transform:translate3d(0,-10px,0)}90%{transform:translate3d(0,5px,0)}to{transform:translateZ(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(-3000px,0,0)}60%{opacity:1;transform:translate3d(25px,0,0)}75%{transform:translate3d(-10px,0,0)}90%{transform:translate3d(5px,0,0)}to{transform:translateZ(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(3000px,0,0)}60%{opacity:1;transform:translate3d(-25px,0,0)}75%{transform:translate3d(10px,0,0)}90%{transform:translate3d(-5px,0,0)}to{transform:translateZ(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;transform:translate3d(0,3000px,0)}60%{opacity:1;transform:translate3d(0,-20px,0)}75%{transform:translate3d(0,10px,0)}90%{transform:translate3d(0,-5px,0)}to{transform:translateZ(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;transform:scale3d(1.1,1.1,1.1)}to{opacity:0;transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{transform:translate3d(0,10px,0)}40%,45%{opacity:1;transform:translate3d(0,-20px,0)}to{opacity:0;transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;transform:translate3d(20px,0,0)}to{opacity:0;transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;transform:translate3d(-20px,0,0)}to{opacity:0;transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{transform:translate3d(0,-10px,0)}40%,45%{opacity:1;transform:translate3d(0,20px,0)}to{opacity:0;transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:translateZ(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;transform:translate3d(0,-2000px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes fadeInDownBig{0%{opacity:0;transform:translate3d(0,-2000px,0)}to{opacity:1;transform:translateZ(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes fadeInLeft{0%{opacity:0;transform:translate3d(-100%,0,0)}to{opacity:1;transform:translateZ(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;transform:translate3d(-2000px,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{opacity:0;transform:translate3d(-2000px,0,0)}to{opacity:1;transform:translateZ(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;transform:translate3d(100%,0,0)}to{opacity:1;transform:translateZ(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:translateZ(0)}}@keyframes fadeInRightBig{0%{opacity:0;transform:translate3d(2000px,0,0)}to{opacity:1;transform:translateZ(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,100%,0)}to{opacity:1;transform:translateZ(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes fadeInUpBig{0%{opacity:0;transform:translate3d(0,2000px,0)}to{opacity:1;transform:translateZ(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{transform:perspective(400px) scaleX(1) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{transform:perspective(400px) scale3d(.95,.95,.95) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{transform:perspective(400px) scaleX(1) translateZ(0) rotateY(0deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}@keyframes flipInX{0%{transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{transform:perspective(400px) rotateX(10deg);opacity:1}80%{transform:perspective(400px) rotateX(-5deg)}to{transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}@keyframes flipInY{0%{transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{transform:perspective(400px) rotateY(10deg);opacity:1}80%{transform:perspective(400px) rotateY(-5deg)}to{transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateX(-20deg);opacity:1}to{transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateX(-20deg);opacity:1}to{transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateY(-15deg);opacity:1}to{transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{transform:perspective(400px)}30%{transform:perspective(400px) rotateY(-15deg);opacity:1}to{transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg)}to{transform:translateZ(0)}}@keyframes lightSpeedIn{0%{transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{transform:skewX(20deg);opacity:1}80%{transform:skewX(-5deg)}to{transform:translateZ(0)}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}to{transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}to{transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{transform-origin:center;transform:rotate(-200deg);opacity:0}to{transform-origin:center;transform:translateZ(0);opacity:1}}@keyframes rotateIn{0%{transform-origin:center;transform:rotate(-200deg);opacity:0}to{transform-origin:center;transform:translateZ(0);opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}to{transform-origin:left bottom;transform:translateZ(0);opacity:1}}@keyframes rotateInDownLeft{0%{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}to{transform-origin:left bottom;transform:translateZ(0);opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate(45deg);opacity:0}to{transform-origin:right bottom;transform:translateZ(0);opacity:1}}@keyframes rotateInDownRight{0%{transform-origin:right bottom;transform:rotate(45deg);opacity:0}to{transform-origin:right bottom;transform:translateZ(0);opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate(45deg);opacity:0}to{transform-origin:left bottom;transform:translateZ(0);opacity:1}}@keyframes rotateInUpLeft{0%{transform-origin:left bottom;transform:rotate(45deg);opacity:0}to{transform-origin:left bottom;transform:translateZ(0);opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}to{transform-origin:right bottom;transform:translateZ(0);opacity:1}}@keyframes rotateInUpRight{0%{transform-origin:right bottom;transform:rotate(-90deg);opacity:0}to{transform-origin:right bottom;transform:translateZ(0);opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{transform-origin:center;opacity:1}to{transform-origin:center;transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{transform-origin:left bottom;opacity:1}to{transform-origin:left bottom;transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{transform-origin:right bottom;opacity:1}to{transform-origin:right bottom;transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{transform:rotate(80deg);transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{transform:rotate(60deg);transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes jackInTheBox{0%{opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}@keyframes jackInTheBox{0%{opacity:0;transform:scale(.1) rotate(30deg);transform-origin:center bottom}50%{transform:rotate(-10deg)}70%{transform:rotate(3deg)}to{opacity:1;transform:scale(1)}}.jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;transform:translateZ(0)}}@keyframes rollIn{0%{opacity:0;transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;transform:translateZ(0)}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(-2000px,0,0);transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;transform:scale(.1) translate3d(2000px,0,0);transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translateZ(0)}}@keyframes slideInDown{0%{transform:translate3d(0,-100%,0);visibility:visible}to{transform:translateZ(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translateZ(0)}}@keyframes slideInLeft{0%{transform:translate3d(-100%,0,0);visibility:visible}to{transform:translateZ(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{transform:translate3d(100%,0,0);visibility:visible}to{transform:translateZ(0)}}@keyframes slideInRight{0%{transform:translate3d(100%,0,0);visibility:visible}to{transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{transform:translate3d(0,100%,0);visibility:visible}to{transform:translateZ(0)}}@keyframes slideInUp{0%{transform:translate3d(0,100%,0);visibility:visible}to{transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{transform:translateZ(0)}to{visibility:hidden;transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.delay-1s{-webkit-animation-delay:1s;animation-delay:1s}.animated.delay-2s{-webkit-animation-delay:2s;animation-delay:2s}.animated.delay-3s{-webkit-animation-delay:3s;animation-delay:3s}.animated.delay-4s{-webkit-animation-delay:4s;animation-delay:4s}.animated.delay-5s{-webkit-animation-delay:5s;animation-delay:5s}.animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s}.animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s}.animated.slow{-webkit-animation-duration:2s;animation-duration:2s}.animated.slower{-webkit-animation-duration:3s;animation-duration:3s}@media (prefers-reduced-motion:reduce),(print){.animated{-webkit-animation-duration:1ms!important;animation-duration:1ms!important;transition-duration:1ms!important;-webkit-animation-iteration-count:1!important;animation-iteration-count:1!important}}.react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow { margin-left: -8px; position: absolute; } .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before, .react-datepicker__month-read-view--down-arrow::before, .react-datepicker__month-year-read-view--down-arrow::before { box-sizing: content-box; position: absolute; border: 8px solid transparent; height: 0; width: 1px; } .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before, .react-datepicker__month-read-view--down-arrow::before, .react-datepicker__month-year-read-view--down-arrow::before { content: ""; z-index: -1; border-width: 8px; left: -8px; border-bottom-color: #aeaeae; } .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle { top: 0; margin-top: -8px; } .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle, .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before { border-top: none; border-bottom-color: #f0f0f0; } .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle::before { top: -1px; border-bottom-color: #aeaeae; } .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow { bottom: 0; margin-bottom: -8px; } .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle, .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow, .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before, .react-datepicker__month-read-view--down-arrow::before, .react-datepicker__month-year-read-view--down-arrow::before { border-bottom: none; border-top-color: #fff; } .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle::before, .react-datepicker__year-read-view--down-arrow::before, .react-datepicker__month-read-view--down-arrow::before, .react-datepicker__month-year-read-view--down-arrow::before { bottom: -1px; border-top-color: #aeaeae; } .react-datepicker-wrapper { display: inline-block; } .react-datepicker { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 0.8rem; background-color: #fff; color: #000; border: 1px solid #aeaeae; border-radius: 0.3rem; display: inline-block; position: relative; } .react-datepicker--time-only .react-datepicker__triangle { left: 35px; } .react-datepicker--time-only .react-datepicker__time-container { border-left: 0; } .react-datepicker--time-only .react-datepicker__time { border-radius: 0.3rem; } .react-datepicker--time-only .react-datepicker__time-box { border-radius: 0.3rem; } .react-datepicker__triangle { position: absolute; left: 50px; } .react-datepicker-popper { z-index: 1; } .react-datepicker-popper[data-placement^="bottom"] { margin-top: 10px; } .react-datepicker-popper[data-placement^="top"] { margin-bottom: 10px; } .react-datepicker-popper[data-placement^="right"] { margin-left: 8px; } .react-datepicker-popper[data-placement^="right"] .react-datepicker__triangle { left: auto; right: 42px; } .react-datepicker-popper[data-placement^="left"] { margin-right: 8px; } .react-datepicker-popper[data-placement^="left"] .react-datepicker__triangle { left: 42px; right: auto; } .react-datepicker__header { text-align: center; background-color: #f0f0f0; border-bottom: 1px solid #aeaeae; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; padding-top: 8px; position: relative; } .react-datepicker__header--time { padding-bottom: 8px; padding-left: 5px; padding-right: 5px; } .react-datepicker__year-dropdown-container--select, .react-datepicker__month-dropdown-container--select, .react-datepicker__month-year-dropdown-container--select, .react-datepicker__year-dropdown-container--scroll, .react-datepicker__month-dropdown-container--scroll, .react-datepicker__month-year-dropdown-container--scroll { display: inline-block; margin: 0 2px; } .react-datepicker__current-month, .react-datepicker-time__header { margin-top: 0; color: #000; font-weight: bold; font-size: 0.944rem; } .react-datepicker-time__header { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .react-datepicker__navigation { background: none; line-height: 1.7rem; text-align: center; cursor: pointer; position: absolute; top: 10px; width: 0; padding: 0; border: 0.45rem solid transparent; z-index: 1; height: 10px; width: 10px; text-indent: -999em; overflow: hidden; } .react-datepicker__navigation--previous { left: 10px; border-right-color: #ccc; } .react-datepicker__navigation--previous:hover { border-right-color: #b3b3b3; } .react-datepicker__navigation--previous--disabled, .react-datepicker__navigation--previous--disabled:hover { border-right-color: #e6e6e6; cursor: default; } .react-datepicker__navigation--next { right: 10px; border-left-color: #ccc; } .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) { right: 80px; } .react-datepicker__navigation--next:hover { border-left-color: #b3b3b3; } .react-datepicker__navigation--next--disabled, .react-datepicker__navigation--next--disabled:hover { border-left-color: #e6e6e6; cursor: default; } .react-datepicker__navigation--years { position: relative; top: 0; display: block; margin-left: auto; margin-right: auto; } .react-datepicker__navigation--years-previous { top: 4px; border-top-color: #ccc; } .react-datepicker__navigation--years-previous:hover { border-top-color: #b3b3b3; } .react-datepicker__navigation--years-upcoming { top: -4px; border-bottom-color: #ccc; } .react-datepicker__navigation--years-upcoming:hover { border-bottom-color: #b3b3b3; } .react-datepicker__month-container { float: left; } .react-datepicker__month { margin: 0.4rem; text-align: center; } .react-datepicker__time-container { float: right; border-left: 1px solid #aeaeae; width: 70px; } .react-datepicker__time-container--with-today-button { display: inline; border: 1px solid #aeaeae; border-radius: 0.3rem; position: absolute; right: -72px; top: 0; } .react-datepicker__time-container .react-datepicker__time { position: relative; background: white; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box { width: 70px; overflow-x: hidden; margin: 0 auto; text-align: center; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list { list-style: none; margin: 0; height: calc(195px + (1.7rem / 2)); overflow-y: scroll; padding-right: 0px; padding-left: 0px; width: 100%; box-sizing: content-box; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item { height: 30px; padding: 5px 10px; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover { cursor: pointer; background-color: #f0f0f0; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected { background-color: #216ba5; color: white; font-weight: bold; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover { background-color: #216ba5; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled { color: #ccc; } .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover { cursor: default; background-color: transparent; } .react-datepicker__week-number { color: #ccc; display: inline-block; width: 1.7rem; line-height: 1.7rem; text-align: center; margin: 0.166rem; } .react-datepicker__week-number.react-datepicker__week-number--clickable { cursor: pointer; } .react-datepicker__week-number.react-datepicker__week-number--clickable:hover { border-radius: 0.3rem; background-color: #f0f0f0; } .react-datepicker__day-names, .react-datepicker__week { white-space: nowrap; } .react-datepicker__day-name, .react-datepicker__day, .react-datepicker__time-name { color: #000; display: inline-block; width: 1.7rem; line-height: 1.7rem; text-align: center; margin: 0.166rem; } .react-datepicker__day { cursor: pointer; } .react-datepicker__day:hover { border-radius: 0.3rem; background-color: #f0f0f0; } .react-datepicker__day--today { font-weight: bold; } .react-datepicker__day--highlighted { border-radius: 0.3rem; background-color: #3dcc4a; color: #fff; } .react-datepicker__day--highlighted:hover { background-color: #32be3f; } .react-datepicker__day--highlighted-custom-1 { color: magenta; } .react-datepicker__day--highlighted-custom-2 { color: green; } .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range { border-radius: 0.3rem; background-color: #216ba5; color: #fff; } .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover { background-color: #1d5d90; } .react-datepicker__day--keyboard-selected { border-radius: 0.3rem; background-color: #2a87d0; color: #fff; } .react-datepicker__day--keyboard-selected:hover { background-color: #1d5d90; } .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range) { background-color: rgba(33, 107, 165, 0.5); } .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range) { background-color: #f0f0f0; color: #000; } .react-datepicker__day--disabled { cursor: default; color: #ccc; } .react-datepicker__day--disabled:hover { background-color: transparent; } .react-datepicker__input-container { position: relative; display: inline-block; } .react-datepicker__year-read-view, .react-datepicker__month-read-view, .react-datepicker__month-year-read-view { border: 1px solid transparent; border-radius: 0.3rem; } .react-datepicker__year-read-view:hover, .react-datepicker__month-read-view:hover, .react-datepicker__month-year-read-view:hover { cursor: pointer; } .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow { border-top-color: #b3b3b3; } .react-datepicker__year-read-view--down-arrow, .react-datepicker__month-read-view--down-arrow, .react-datepicker__month-year-read-view--down-arrow { border-top-color: #ccc; float: right; margin-left: 20px; top: 8px; position: relative; border-width: 0.45rem; } .react-datepicker__year-dropdown, .react-datepicker__month-dropdown, .react-datepicker__month-year-dropdown { background-color: #f0f0f0; position: absolute; width: 50%; left: 25%; top: 30px; z-index: 1; text-align: center; border-radius: 0.3rem; border: 1px solid #aeaeae; } .react-datepicker__year-dropdown:hover, .react-datepicker__month-dropdown:hover, .react-datepicker__month-year-dropdown:hover { cursor: pointer; } .react-datepicker__year-dropdown--scrollable, .react-datepicker__month-dropdown--scrollable, .react-datepicker__month-year-dropdown--scrollable { height: 150px; overflow-y: scroll; } .react-datepicker__year-option, .react-datepicker__month-option, .react-datepicker__month-year-option { line-height: 20px; width: 100%; display: block; margin-left: auto; margin-right: auto; } .react-datepicker__year-option:first-of-type, .react-datepicker__month-option:first-of-type, .react-datepicker__month-year-option:first-of-type { border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; } .react-datepicker__year-option:last-of-type, .react-datepicker__month-option:last-of-type, .react-datepicker__month-year-option:last-of-type { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border-bottom-left-radius: 0.3rem; border-bottom-right-radius: 0.3rem; } .react-datepicker__year-option:hover, .react-datepicker__month-option:hover, .react-datepicker__month-year-option:hover { background-color: #ccc; } .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming, .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming, .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming { border-bottom-color: #b3b3b3; } .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous, .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous, .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous { border-top-color: #b3b3b3; } .react-datepicker__year-option--selected, .react-datepicker__month-option--selected, .react-datepicker__month-year-option--selected { position: absolute; left: 15px; } .react-datepicker__close-icon { background-color: transparent; border: 0; cursor: pointer; outline: 0; padding: 0; vertical-align: middle; position: absolute; height: 16px; width: 16px; top: 25%; right: 7px; } .react-datepicker__close-icon::after { background-color: #216ba5; border-radius: 50%; bottom: 0; box-sizing: border-box; color: #fff; content: "\D7"; cursor: pointer; font-size: 12px; height: 16px; width: 16px; line-height: 1; margin: -8px auto 0; padding: 2px; position: absolute; right: 0px; text-align: center; } .react-datepicker__today-button { background: #f0f0f0; border-top: 1px solid #aeaeae; cursor: pointer; text-align: center; font-weight: bold; padding: 5px 0; clear: left; } .react-datepicker__portal { position: fixed; width: 100vw; height: 100vh; background-color: rgba(0, 0, 0, 0.8); left: 0; top: 0; justify-content: center; align-items: center; display: flex; z-index: 2147483647; } .react-datepicker__portal .react-datepicker__day-name, .react-datepicker__portal .react-datepicker__day, .react-datepicker__portal .react-datepicker__time-name { width: 3rem; line-height: 3rem; } @media (max-width: 400px), (max-height: 550px) { .react-datepicker__portal .react-datepicker__day-name, .react-datepicker__portal .react-datepicker__day, .react-datepicker__portal .react-datepicker__time-name { width: 2rem; line-height: 2rem; } } .react-datepicker__portal .react-datepicker__current-month, .react-datepicker__portal .react-datepicker-time__header { font-size: 1.44rem; } .react-datepicker__portal .react-datepicker__navigation { border: 0.81rem solid transparent; } .react-datepicker__portal .react-datepicker__navigation--previous { border-right-color: #ccc; } .react-datepicker__portal .react-datepicker__navigation--previous:hover { border-right-color: #b3b3b3; } .react-datepicker__portal .react-datepicker__navigation--previous--disabled, .react-datepicker__portal .react-datepicker__navigation--previous--disabled:hover { border-right-color: #e6e6e6; cursor: default; } .react-datepicker__portal .react-datepicker__navigation--next { border-left-color: #ccc; } .react-datepicker__portal .react-datepicker__navigation--next:hover { border-left-color: #b3b3b3; } .react-datepicker__portal .react-datepicker__navigation--next--disabled, .react-datepicker__portal .react-datepicker__navigation--next--disabled:hover { border-left-color: #e6e6e6; cursor: default; } .jq-toast-wrap,.jq-toast-wrap *{margin:0;padding:0}.jq-toast-wrap{display:block;position:fixed;width:250px;pointer-events:none!important;letter-spacing:normal;z-index:9000!important}.jq-toast-wrap.bottom-left{bottom:20px;left:20px}.jq-toast-wrap.bottom-right{bottom:20px;right:40px}.jq-toast-wrap.top-left{top:20px;left:20px}.jq-toast-wrap.top-right{top:20px;right:40px}.jq-toast-single{display:block;width:100%;padding:10px;margin:0 0 5px;border-radius:4px;font-size:12px;font-family:arial,sans-serif;line-height:17px;position:relative;pointer-events:all!important;background-color:#444;color:#fff}.jq-toast-single h2{font-family:arial,sans-serif;font-size:14px;margin:0 0 7px;background:0 0;color:inherit;line-height:inherit;letter-spacing:normal}.jq-toast-single a{color:#eee;text-decoration:none;font-weight:700;border-bottom:1px solid #fff;padding-bottom:3px;font-size:12px}.jq-toast-single ul{margin:0 0 0 15px;background:0 0;padding:0}.jq-toast-single ul li{list-style-type:disc!important;line-height:17px;background:0 0;margin:0;padding:0;letter-spacing:normal}.close-jq-toast-single{position:absolute;top:3px;right:7px;font-size:14px;cursor:pointer}.jq-toast-loader{display:block;position:absolute;top:-2px;height:5px;width:0;left:0;border-radius:5px;background:red}.jq-toast-loaded{width:100%}.jq-has-icon{padding:10px 10px 10px 50px;background-repeat:no-repeat;background-position:10px}.jq-icon-info{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=);background-color:#31708f;color:#d9edf7;border-color:#bce8f1}.jq-icon-warning{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=);background-color:#8a6d3b;color:#fcf8e3;border-color:#faebcc}.jq-icon-error{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=);background-color:#a94442;color:#f2dede;border-color:#ebccd1}.jq-icon-success{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==);color:#dff0d8;background-color:#3c763d;border-color:#d6e9c6}@-webkit-keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__container{position:relative;box-sizing:border-box}.splide__list{margin:0!important;padding:0!important;width:-webkit-max-content;width:-moz-max-content;width:max-content;will-change:transform}.splide.is-active .splide__list{display:flex}.splide__pagination{display:inline-flex;align-items:center;width:95%;flex-wrap:wrap;justify-content:center;margin:0}.splide__pagination li{list-style-type:none;display:inline-block;line-height:1;margin:0}.splide{visibility:hidden}.splide,.splide__slide{position:relative;outline:none}.splide__slide{box-sizing:border-box;list-style-type:none!important;margin:0;flex-shrink:0}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;display:inline-block;width:20px;height:20px;border-radius:50%;border:2px solid #999;border-left-color:transparent;-webkit-animation:splide-loading 1s linear infinite;animation:splide-loading 1s linear infinite}.splide__track{position:relative;z-index:0;overflow:hidden}.splide--draggable>.splide__track>.splide__list>.splide__slide{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__track>.splide__list>.splide__slide{position:absolute;top:0;left:0;z-index:0;opacity:0}.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{position:relative;z-index:1;opacity:1}.splide--rtl{direction:rtl}.splide--ttb>.splide__track>.splide__list{display:block}.splide--ttb>.splide__pagination{width:auto}@-webkit-keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}@keyframes splide-loading{0%{transform:rotate(0)}to{transform:rotate(1turn)}}.splide__container{position:relative;box-sizing:border-box}.splide__list{margin:0!important;padding:0!important;width:-webkit-max-content;width:-moz-max-content;width:max-content;will-change:transform}.splide.is-active .splide__list{display:flex}.splide__pagination{display:inline-flex;align-items:center;width:95%;flex-wrap:wrap;justify-content:center;margin:0}.splide__pagination li{list-style-type:none;display:inline-block;line-height:1;margin:0}.splide{visibility:hidden}.splide,.splide__slide{position:relative;outline:none}.splide__slide{box-sizing:border-box;list-style-type:none!important;margin:0;flex-shrink:0}.splide__slide img{vertical-align:bottom}.splide__slider{position:relative}.splide__spinner{position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;display:inline-block;width:20px;height:20px;border-radius:50%;border:2px solid #999;-webkit-animation:splide-loading 1s linear infinite;animation:splide-loading 1s linear infinite}.splide__track{position:relative;z-index:0;overflow:hidden}.splide--draggable>.splide__track>.splide__list>.splide__slide{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.splide--fade>.splide__track>.splide__list{display:block}.splide--fade>.splide__track>.splide__list>.splide__slide{position:absolute;top:0;left:0;z-index:0;opacity:0}.splide--fade>.splide__track>.splide__list>.splide__slide.is-active{position:relative;z-index:1;opacity:1}.splide--rtl{direction:rtl}.splide--ttb>.splide__track>.splide__list{display:block}.splide--ttb>.splide__pagination{width:auto}.splide__arrow{position:absolute;z-index:1;top:50%;transform:translateY(-50%);border:none;padding:0;background:transparent}.splide__arrow svg{width:2.5em;height:2.5em;fill:#00bfff;transition:fill .2s linear}.splide__arrow:hover{cursor:pointer}.splide__arrow:hover svg{fill:#66d9ff}.splide__arrow:focus{outline:none}.splide__arrow--prev{left:1em}.splide__arrow--prev svg{transform:scaleX(-1)}.splide__arrow--next{right:1em}.splide__pagination{position:absolute;z-index:1;bottom:.5em;left:50%;transform:translateX(-50%);padding:0}.splide__pagination__page{display:inline-block;width:10px;height:10px;background:#ccc;border-radius:50%;margin:3px;padding:0;transition:all .2s linear;border:none}.splide__pagination__page.is-active{transform:scale(1.4);background:#00bfff}.splide__pagination__page:hover{cursor:pointer;background:#66d9ff}.splide__pagination__page:focus{outline:none}.splide__progress__bar{width:0;height:3px;background:#00bfff}.splide__spinner{border:2px solid #00bfff;border-left-color:transparent}.splide--nav>.splide__track>.splide__list>.splide__slide{border:3px solid transparent;cursor:pointer;opacity:.7}.splide--nav>.splide__track>.splide__list>.splide__slide.is-active{border-color:#00bfff;opacity:1}.splide--nav>.splide__track>.splide__list>.splide__slide:focus{outline:none}.splide--rtl>.splide__arrows .splide__arrow--prev,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev{right:1em;left:auto}.splide--rtl>.splide__arrows .splide__arrow--prev svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:scaleX(1)}.splide--rtl>.splide__arrows .splide__arrow--next,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next{left:1em;right:auto}.splide--rtl>.splide__arrows .splide__arrow--next svg,.splide--rtl>.splide__track>.splide__arrows .splide__arrow--next svg{transform:scaleX(-1)}.splide--ttb>.splide__arrows .splide__arrow,.splide--ttb>.splide__track>.splide__arrows .splide__arrow{left:50%;transform:translate(-50%)}.splide--ttb>.splide__arrows .splide__arrow--prev,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev{top:1em}.splide--ttb>.splide__arrows .splide__arrow--prev svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--prev svg{transform:rotate(-90deg)}.splide--ttb>.splide__arrows .splide__arrow--next,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next{top:auto;bottom:1em}.splide--ttb>.splide__arrows .splide__arrow--next svg,.splide--ttb>.splide__track>.splide__arrows .splide__arrow--next svg{transform:rotate(90deg)}.splide--ttb>.splide__pagination{display:flex;flex-direction:column;bottom:50%;left:auto;right:.5em;transform:translateY(50%)}/** * 此處給予不會 scss 語法的人使用 * 如果你會 scss 語法，建議直接修改 resources/assets/sass/project/{siteid}/style.scss 檔案 * 想學的人可以先看看以下幾個基本教學 * * http://eddychang.me/blog/others/91-scss-15-mins.html * http://augus-blog.logdown.com/posts/143401-scss-tutorial * https://chentsu.wordpress.com/2013/10/21/css-scss-%E5%9F%BA%E6%9C%AC%E8%AA%9E%E6%B3%95/ */ @charset "UTF-8"; /* * Bootstrap 4 解析度區塊斷點 */ /** * 預設字型 */ /** * 自動產生案件 url 路徑 * * @param Number $siteid 站台 id * @param String $filename 檔名 */ /** * 字型引入幫助 * * @param String $familyName 字型家族名稱 * @param String $fontPath 字型目錄 / 檔案名稱 * @param String $fontPathExtend 字型檔名延伸 * @param String $type 檔案類別; 預設 woff * @param String $style 字型樣式; 預設 normal * @param String $weight 字型寬度; 預設 400 */ /** * 依 px 計算出 em * * @param Number $fontSize 目標像素大小 * @param Number $baseSize 父層字元像素大小; 預設 16 * @param String $unit 輸出單位 em|rem; 預設 em * @return String 計算後 em 值 */ /** * phtoshop 字距百分比換算像素 * * @param Number $percent photoshop 字距百分比 * @param Number $baseSize 父層字元像素大小; 預設 16 * @return String 計算後像素值 */ /** * 指定格線下指定格數寬度計算式 * * @param Number $colNumber 指定格數；預設 1 * @param Number $gap 間隔寬度像素；預設 15 * @param Number $grid 最大格數；預設 12 * @param Number $maxWidth 整體區塊最大寬度 * @return String calc 計算式 */ /** * 計算中間值並輸出 clamp 語法 * @param String $min 最小像素值 * @param String $max 最大像素值 * @param String $minView 最小視窗像素值 * @param String $maxView 最大視窗像素值 */ /** * 字串替換函式 * @param String $string 原始字串 * @param String $search 搜尋字串 * @param String $replace 替換字串 */ /** * Google 字型自動替換公司代理鏡像 * @param String Google 字型嵌入網址 */ /** * 文字段行 */ /** * 限制只顯示一行文字，超出截斷顯示 ... */ /** * 絕對置中 * * @param Number $zIndex z-index * @param String $position 自訂元素 position */ /** * 水平置中 * * @param Number $zIndex z-index * @param String $position 自訂元素 position */ /** * 垂直置中 * * @param Number $zIndex z-index * @param String $position 自訂元素 position */ /** * 文字前加上星號 * * @param String $color 顏色 */ /** * 去除 chorme 表單欄位高亮外框 */ /** * 去除表單數字欄位按鈕 */ /** * 快速套用 transition 動態 */ /** @media 助理方法 srart **********************************************/ /** * 大於 $size 套用樣式 * * @param Number $width 最小範圍 */ /** * 小於 $size 套用樣式 * * @param Number $width 最大範圍 */ /** * 介於 $min 與 $max 之間套用樣式 * * @param Number $width 最大範圍 */ /** @media 助理方法 end **********************************************/ #branch-business #branch-filter #branch-filter-send, #branch-business #branch-filter #branch-filter-clear, #siblings-link #siblings-link-wrap .link a { color: #000; font-size: 1.1875em; background: #FFF; border: 1px solid #000; border-radius: 0; padding: 7px 2em; cursor: pointer; white-space: nowrap; } #branch-business #branch-filter #branch-filter-send:hover, #branch-business #branch-filter #branch-filter-clear:hover, #siblings-link #siblings-link-wrap .link a:hover { color: #000; box-shadow: 1px 1px 3px #CCC; text-decoration: none; } #branch-business #branch-filter [disabled]#branch-filter-send, #branch-business #branch-filter [disabled]#branch-filter-clear, #siblings-link #siblings-link-wrap .link a[disabled] { color: #ACACAC; border-color: #ACACAC; box-shadow: none; } @media (max-width: 767px) { #branch-business #branch-filter #branch-filter-send, #branch-business #branch-filter #branch-filter-clear, #siblings-link #siblings-link-wrap .link a { font-size: 1em; } } /** React DatePicker start *********************************************/ /** React DatePicker end ***********************************************/ /** toast 套件 start ****************************************************/ .jq-toast-wrap { font-size: 1rem; } .jq-toast-wrap .jq-toast-single { font-size: 0.875em; font-weight: normal; } .jq-toast-wrap .jq-toast-single .jq-toast-heading { font-size: 1.1428571429em; } /** toast 套件 end ******************************************************/ /** React-select start *************************************************/ .react-select { min-width: 200px; } /** React-select end ***************************************************/ /** Address_tw start ***************************************************/ .address_tw_split_view > * { width: 100% !important; } .address_tw_split_view + * { margin-top: 15px; } /** Address_tw end *****************************************************/ /** 共用 class 設定 start ***********************************************/ .pointer { cursor: pointer; } .btn { white-space: nowrap; } /** 共用 class 設定 end *************************************************/ /** 列表縮圖正方形 start *************************************************/ .thumb { position: relative; display: block; height: auto !important; } .thumb:after { content: ""; display: inline-block; width: 0; padding-top: 100%; vertical-align: middle; } .thumb img { position: absolute; top: 0; bottom: 0; left: 0; right: 0; max-width: 100%; max-height: 100%; margin: auto; } /** 列表縮圖正方形 end ***************************************************/ /** * 動態相關 css start *************************************************** * 產生 .animate-linear-fast .animate-both-common .... 等快速套用 css class */ .animate-linear-fast { transition: all linear 0.25s; } .animate-in-fast { transition: all ease-in 0.25s; } .animate-out-fast { transition: all ease-out 0.25s; } .animate-both-fast { transition: all ease-in-out 0.25s; } .animate-fast { transition: all ease-in-out 0.25s; } .animate-linear-common { transition: all linear 0.5s; } .animate-in-common { transition: all ease-in 0.5s; } .animate-out-common { transition: all ease-out 0.5s; } .animate-both-common { transition: all ease-in-out 0.5s; } .animate-common { transition: all ease-in-out 0.5s; } .animate-linear-slow { transition: all linear 1s; } .animate-in-slow { transition: all ease-in 1s; } .animate-out-slow { transition: all ease-out 1s; } .animate-both-slow { transition: all ease-in-out 1s; } .animate-slow { transition: all ease-in-out 1s; } .animate { transition: all ease-in-out 0.5s; } /** 動態相關 css end ***************************************************/ /** 切換開關 start *****************************************************/ .toggle_btn .toggle_wrap.toggle_left:before, .toggle_btn .toggle_wrap.toggle_right:before { content: ""; position: absolute; top: 0; width: calc(100% - 36.5px); height: 100%; z-index: 10; } .toggle_btn { display: inline-block; } .toggle_btn .toggle_wrap { position: relative; border-radius: 0.25rem; overflow: hidden; } .toggle_btn .toggle_wrap.toggle_right:before { left: 0; } .toggle_btn .toggle_wrap.toggle_left:before { right: 0; } .toggle_btn .toggle_wrap button.toggle_item { box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) inset; } .toggle_btn .toggle_touch { z-index: 5; border-color: transparent #333 transparent #333; } /** 切換開關 end *******************************************************/ /** 快速提示 start *****************************************************/ .quick_notice { position: fixed; left: 50%; transform: translateX(-50%); z-index: 999; top: 0; padding: 0.5em 2em 0.8em 2em; border-radius: 0 0 0.25em 0.25em; box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); } .quick_notice.hidden { transform: translate(-50%, -110%); } .quick_notice span { font-size: 1em; vertical-align: middle; } .quick_notice small { display: inline-block; vertical-align: middle; padding: 0.2em; cursor: pointer; } /** 快速提示 end *******************************************************/ /** Cookies 提示 start ************************************************/ #cookies-consent { position: fixed; bottom: 0; left: 0; width: 100%; color: #FFF; z-index: 10000000; font-size: 0.875rem; } #cookies-consent #cookies-consent-content { position: relative; padding: 1em; background-color: rgba(0, 0, 0, 0.85); box-shadow: 0 -3px 5px rgba(0, 0, 0, 0.5), 0 3px 5px rgba(0, 0, 0, 0.5); } #cookies-consent #cookies-consent-content button { color: #FFF; background-color: transparent; border-color: #FFF; border-width: 1px; border-radius: 0; font-size: 0.9375em; padding: 0.8em; min-width: 13em; } #cookies-consent #cookies-consent-content button + button { margin-left: 1em; color: #777; border: 1px solid #777; } #cookies-consent #cookies-consent-content button:hover { background-color: black; } @media (max-width: 575px) { #cookies-consent #cookies-consent-content button { min-width: 0; padding: 0.5em; width: calc(50% - 1em); } } #cookies-consent #cookies-consent-content #consent-query { position: relative; text-align: center; z-index: 2; } #cookies-consent #cookies-consent-content #consent-query a { color: #DDD; text-decoration: underline; } #cookies-consent #cookies-consent-content #consent-query a:hover { color: #FFF; text-decoration: none; } #cookies-consent #cookies-consent-content #disallow-query { display: none; position: relative; z-index: 2; } #cookies-consent #cookies-consent-content #disallow-query button { min-width: 13em; margin-left: auto; } @media (max-width: 575px) { #cookies-consent #cookies-consent-content #disallow-query button { min-width: 0; margin: 0; width: 100%; } } #cookies-consent.hidden #cookies-consent-content { transform: translateY(120%); } #cookies-consent.false { position: relative; margin-bottom: 1em; } #cookies-consent.false #consent-query { display: none !important; } #cookies-consent.false #disallow-query { display: flex !important; } /** Cookies 提示 end **************************************************/ /** 首頁彈跳視窗 start **************************************************/ #popup { z-index: 9999999; } /** 首頁彈跳視窗 end ****************************************************/ /** react range 元件 start **************************************************/ .react-range-component { position: relative; padding: 9px; margin: 10px 0; } .react-range-component .react-range-component-wrapper { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; width: 100%; } .react-range-component .react-range-component-wrapper .react-range-component-scroll-bar { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; width: 100%; height: 3px; background-color: #CCC; z-index: 1; } .react-range-component .react-range-component-wrapper .react-range-component-scroll-bar-inner { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; left: 0%; width: 100%; height: 3px; background-color: #000; z-index: 2; } .react-range-component .react-range-component-wrapper .react-range-component-point { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; pointer-events: none; outline: none; top: -1.5px; left: 0; width: 100%; height: 0; z-index: 3; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; /* For Chrome browsers */ /* For Firefox browsers */ } .react-range-component .react-range-component-wrapper .react-range-component-point::-webkit-slider-thumb { background-color: #f1f5f7; border: none; border-radius: 50%; box-shadow: 0 0 1px 1px #ced4da; cursor: ew-resize; height: 18px; width: 18px; margin-top: 4px; pointer-events: all; position: relative; -webkit-appearance: none; } .react-range-component .react-range-component-wrapper .react-range-component-point::-moz-range-thumb { background-color: #f1f5f7; border: none; border-radius: 50%; box-shadow: 0 0 1px 1px #ced4da; cursor: ew-resize; height: 18px; width: 18px; margin-top: 4px; pointer-events: all; position: relative; -moz-appearance: none; } .react-range-component .react-range-component-wrapper .react-range-component-point.react-range-component-max-point { z-index: 4; } /** react range 元件 end ****************************************************/ /** alibaba icon start *****************************************************/ @font-face { font-family: "icomoon-alibaba"; src: url(/dist/fonts/icomoon-alibaba.eot?d6f0bb7f58f5192be6137c2b5677bc41); src: url(/dist/fonts/icomoon-alibaba.eot?d6f0bb7f58f5192be6137c2b5677bc41) format("embedded-opentype"), url(/dist/fonts/icomoon-alibaba.ttf?10da8685166b923864b3bbe82f44ca6a) format("truetype"), url(/dist/fonts/icomoon-alibaba.woff?e9c03550f4068f68abfd95adea039fa5) format("woff"), url(/dist/fonts/icomoon-alibaba.svg?e0d37e449e4511ad37d550750f558e36) format("svg"); font-weight: normal; font-style: normal; font-display: block; } [class^=common-alibaba], [class*=" common-alibaba"] { /* use !important to prevent issues with browser extensions that change fonts */ font-family: "icomoon-alibaba" !important; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; line-height: 1; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .common-alibaba:before { content: "\E902"; font-size: 1.2em; } /** alibaba icon end *******************************************************/ /** ip2 location start ************************************************/ #ip2-location { position: -webkit-sticky; position: sticky; top: 0; z-index: 99999; width: 100%; text-align: center; display: flex; align-items: center; color: #f8f9fa; background-color: rgba(0, 0, 0, 0.9); box-shadow: 0 -3px 20px rgba(0, 0, 0, 0.5), 0 3px 20px rgba(0, 0, 0, 0.5); } @media (max-width: 767px) { #ip2-location { display: block; z-index: 999; } } #ip2-location .description { flex: 4; padding: 1em; font-size: 1.2em; } @media (max-width: 767px) { #ip2-location .description { padding: 0.5em; } } #ip2-location .suggestion { flex: 3; padding: 1em; display: flex; justify-content: center; align-items: center; } @media (max-width: 767px) { #ip2-location .suggestion { padding: 0; } } #ip2-location .suggestion .text { display: flex; align-items: center; } #ip2-location .suggestion .text .language { background-color: #f00; margin: 0.5em; padding: 0.5em; border-radius: 15%; } #ip2-location .suggestion .submit { display: flex; align-items: center; } #ip2-location .suggestion .submit button { background: none; color: inherit; margin: 0.2em; } #ip2-location .suggestion .submit #dont_show_redirect { border: none; } #ip2-location .suggestion .text, #ip2-location .suggestion .submit { padding: 0.2em; } #ip2-location.hidden { transform: translateY(-120%); transition: transform 1s ease; } /** ip2 location end **************************************************/ /** No recaptcha style start ******************************************/ #no-recaptcha-render { transition: all ease-in-out 1s; position: fixed; bottom: 20px; right: 20px; display: block; padding: 10px 16px; background-color: #FFF; border-style: solid; border-width: 1px 1px 1px 5px; border-color: #000; font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #000; transform: translateX(0); -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #no-recaptcha-render.hide { transform: translateX(calc(100% + 15px)); } #no-recaptcha-render:hover { transform: translateX(0); } /** No recaptcha style end ********************************************/ #smartMenusBt4 .navbar-header { background-color: #333; } #smartMenusBt4 .navbar-header .navbar-toggle { background-color: transparent; border-radius: 0px; box-shadow: none; border: 0px; } #smartMenusBt4 .navbar-header .navbar-toggle .icon-bar { background-color: #fff; width: 30px; height: 2px; margin-bottom: 10px; display: block; } #smartMenusBt4 .navbar-header .navbar-toggle .icon-bar:last-child { margin-bottom: 0px; } #smartMenusBt4 .FooterlangList { display: none; } #smartMenusBt4 .collapse:not(.show) { display: block; } @media (min-width: 768px) { #smartMenusBt4 .collapse:not(.show) { display: block; } } @media (max-width: 767px) { #smartMenusBt4 .navbar-header #openBtn .icon-bar { background-color: #000; width: 30px; height: 2px; margin: 10px 0px; } #smartMenusBt4 .navbar-collapse { position: fixed; top: 0; height: 100% !important; width: 100%; left: 100%; display: block; padding-left: 0; padding-right: 0; overflow-y: auto; z-index: 999; border-top: none; } #smartMenusBt4 .navbar-collapse #main-menu li a { padding: 13px 10px; } #smartMenusBt4 .mobileLeft { width: 20%; height: 100%; float: left; } #smartMenusBt4 .collapseBox { width: 80%; float: left; height: auto; min-height: 100% !important; background-color: #f4f4f4; padding: 15px; } #smartMenusBt4 .collapseBox .sm-clean a .sub-arrow { background-color: transparent; } #smartMenusBt4 .collapseBox #search_area { padding-bottom: 15px; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } #smartMenusBt4 .collapseBox #search_area .smartMenusBt4search { background-color: #fff; width: calc(100% - 50px); border: 0px; padding-left: 10px; border-radius: 0px; } #smartMenusBt4 .collapseBox #search_area .input-group-append .btn { border-radius: 0px; background-color: #fff; } #smartMenusBt4 .collapseBox #inquiry_shopping_member { text-align: center; border-bottom: 1px solid rgba(0, 0, 0, 0.05); } #smartMenusBt4 .collapseBox #inquiry_shopping_member a { padding-top: 15px; padding-bottom: 15px; color: #000; font-size: 1.5rem; } #smartMenusBt4 .collapseBox #inquiry_shopping_member a i { margin-bottom: 5px; font-size: 1.5rem; } #smartMenusBt4 .collapseBox #inquiry_shopping_member a .mobile_cart_area, #smartMenusBt4 .collapseBox #inquiry_shopping_member a .mobile_inquiry { position: relative; display: inline-block; } #smartMenusBt4 .collapseBox #inquiry_shopping_member a .mobile_cart_area .badge-danger, #smartMenusBt4 .collapseBox #inquiry_shopping_member a .mobile_inquiry .badge-danger { position: absolute; top: -7px; right: -7px; } #smartMenusBt4 .collapseBox #main-menu { border-bottom: 1px solid rgba(0, 0, 0, 0.05); } #smartMenusBt4 .collapseBox .FooterlangList { display: block; text-align: center; margin-top: 20px; } #smartMenusBt4 .collapseBox .FooterlangList #language_textlist a { font-size: 1.5rem; color: #7d7d7d; } #smartMenusBt4 #closeBtn { display: block; width: 50px; height: 50px; float: left; margin-left: -70px; margin-top: -15px; background-repeat: no-repeat; background-position: 50%; background-color: #f4f4f4; } #smartMenusBt4 #closeBtn .icon-bar { width: 30px; height: 2px; background-color: #000; display: block; margin-left: 10px; } #smartMenusBt4 #closeBtn .icon-bar:nth-child(1) { transform: translateY(27px) rotate(-45deg); } #smartMenusBt4 #closeBtn .icon-bar:nth-child(2) { transform: translateY(25px) rotate(45deg); } .lockPage { position: fixed; overflow-y: auto; width: 100%; } #smartmenu_v2_overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 2; cursor: pointer; } } #header { z-index: 999; background-color: transparent; position: absolute; top: 0; left: 0; right: 0; padding: 1.5625vw 0; } #header::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(83.333333% - 30px); height: 100%; border: 1px solid #FFFFFF; background: linear-gradient(115deg, rgba(208, 225, 234, 0.4), rgba(134, 171, 188, 0.3)), rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-left-radius: max(1.5625vw, 15px); border-bottom-right-radius: max(1.5625vw, 15px); } #header.layoutHeader { position: initial; } #header .logo_wrap { display: flex; align-items: center; } #header .logo_wrap > a { display: flex; align-items: center; max-width: 6.667vw; margin-left: 2.604vw; max-width: 100%; height: 83%; } #header .logo_wrap > a img { max-width: 100%; } #header .funch { display: flex; align-items: center; position: relative; margin-left: 0.78125vw; } #header .funch.funchMenuBtn { margin-left: 0; } #header .funch.funchMenuBtn::before { display: none; } #header .funch::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; background-color: #2C2C2C; height: max(0.9375vw, 10px); } #header .funch #language_icondropdown { margin: 0; padding: 0; display: flex; align-items: center; } #header .funch #language_icondropdown > .dropdown > a { color: #174272; font-size: clamp(16px, 0.833vw, 16px); position: relative; display: flex; align-items: center; justify-content: center; width: max(2.083vw, 25px); height: max(2.083vw, 25px); transition: all 0.3s; position: relative; background-color: #AFD6F3; margin-left: 0.78125vw; border-radius: 50%; transition: all 0.3s; } #header .funch #language_icondropdown > .dropdown > a:hover { background-color: #174272; color: #FFFFFF; } #header .funch #language_icondropdown > .dropdown > a .img { display: flex; align-items: center; } #header .funch #language_icondropdown > .dropdown > a .arrow { display: flex; align-items: center; margin-left: 5px; transform: translateY(2px); } #header .funch #language_icondropdown > .dropdown > a .icon { margin-left: 5px; } #header .funch #language_icondropdown > .dropdown .dropdown-menu { border-radius: max(1.5625vw, 15px); background: linear-gradient(115deg, rgba(208, 225, 234, 0.4), rgba(134, 171, 188, 0.3)), rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: none; padding: 10px 0; box-shadow: 0 5px 9px rgba(0, 0, 0, 0.2); padding: 0px; } #header .funch #language_icondropdown > .dropdown .dropdown-menu.show { transform: translate3d(-50%, 4.427vw, 0px) !important; } #header .funch #language_icondropdown > .dropdown .dropdown-menu::before, #header .funch #language_icondropdown > .dropdown .dropdown-menu::after { display: none; } #header .funch #language_icondropdown > .dropdown .dropdown-menu li a { font-size: clamp(16px, 0.833vw, 16px); color: #2C2C2C; transition: all 0.3s; padding: 10px; display: block; text-align: center; } #header .funch #language_icondropdown > .dropdown .dropdown-menu li a::before { display: none !important; } #header .funch #language_icondropdown > .dropdown .dropdown-menu li a::after { display: none; } #header .funch #language_icondropdown > .dropdown .dropdown-menu li a:hover { color: #174272; font-weight: 600; } #header .funch #cart_area { color: #174272; font-size: clamp(16px, 0.833vw, 16px); position: relative; display: flex; align-items: center; justify-content: center; width: max(2.083vw, 25px); height: max(2.083vw, 25px); transition: all 0.3s; position: relative; background-color: #AFD6F3; margin-left: 0.78125vw; border-radius: 50%; display: none !important; transition: all 0.3s; } #header .funch #cart_area:hover { background-color: #174272; color: #FFFFFF; } #header .funch #cart_area .badge-danger { padding: 0; font-size: 16px; font-size: clamp(16px, 0.833vw, 16px); font-size: 12px; color: #ffffff; position: initial; background-color: #174272; display: flex; align-items: center; justify-content: center; font-weight: 400; padding: 0; width: 15px; height: 15px; border-radius: 50%; position: absolute; bottom: 0; right: 0; } #header .funch #search_area { margin-right: 1.5625vw; } #header .funch #search_area ul { padding: 0; margin: 0; } #header .funch #search_area ul .search_input_group { flex-wrap: nowrap; } #header .funch #search_area ul .search_input_group .input-group-append { padding-right: 1.042vw; } #header .funch #search_area ul .search_input_group .input-group-append .btn { background: transparent; border: none; color: #000000; padding: 0; display: flex; align-items: center; justify-content: center; } #header .funch #search_area ul .search_input_group .form-control { padding: 0; border: none; border-radius: 0; width: 55px; } #header .funch #search_area ul .search_input_group .form-control::-moz-placeholder { color: rgba(0, 0, 0, 0.5); font-size: clamp(16px, 0.833vw, 16px); } #header .funch #search_area ul .search_input_group .form-control:-ms-input-placeholder { color: rgba(0, 0, 0, 0.5); font-size: clamp(16px, 0.833vw, 16px); } #header .funch #search_area ul .search_input_group .form-control::placeholder { color: rgba(0, 0, 0, 0.5); font-size: clamp(16px, 0.833vw, 16px); } #header .funch #search_block { margin-left: 1.302vw; } #header .funch #search_block a { color: #174272; display: flex; align-items: center; justify-content: center; width: max(2.083vw, 25px); height: max(2.083vw, 25px); font-size: clamp(16px, 0.833vw, 16px); transition: all 0.3s; position: relative; background-color: #AFD6F3; border-radius: 50%; transition: all 0.3s; } #header .funch #search_block a:hover { background-color: #174272; color: #FFFFFF; } #header .funch .contactLink { margin-left: 0.78125vw; margin-right: 1.302vw; } #header .funch .contactLink a { width: 160px; width: max(8.333vw, 100px); height: max(2.083vw, 25px); display: flex; align-items: center; justify-content: center; border-radius: 30px; background-color: #AFD6F3; font-size: 18px; font-size: clamp(12px, 0.9375vw, 18px); color: #174272; font-weight: 600; transition: all 0.3s; } #header .funch .contactLink a:hover { background-color: #174272; color: #FFFFFF; } #header .funch #menuBtn { width: max(2.604vw, 30px); height: max(2.604vw, 30px); width: 45px; height: 45px; width: max(2.34375vw, 25px); height: max(2.34375vw, 25px); border-radius: 50%; background-color: #AFD6F3; display: flex; align-items: center; justify-content: center; flex-direction: column; overflow: hidden; margin-right: 3.125vw; display: none; transition: all 0.3s; } #header .funch #menuBtn:hover { cursor: pointer; background-color: #174272; } #header .funch #menuBtn:hover .iconBar { background-color: #ffffff; } #header .funch #menuBtn .iconBar { width: max(1.302vw, 15px); width: 18px; width: max(0.9375vw, 10px); height: max(0.104vw, 1px); height: 1px; background-color: #1C5EA2; margin: 3px 0; } .modal { z-index: 9999; } .modal .modal-body .btn { background: #222222; border-color: #222222; transition: all 0.3s; color: #ffffff; } .modal .modal-body .btn:hover { color: #062542; background-color: rgba(255, 248, 170, 0.2); border-color: rgba(255, 248, 170, 0.2); } @media (min-width: 768px) { #header { position: fixed; top: 0; width: 100%; left: 50%; transform: translateX(-50%); } #header.no_banner { position: relative; } #header.fixed { position: fixed; top: 0; width: 100%; left: 50%; transform: translateX(-50%); z-index: 11; right: auto; z-index: 999; } #header.fixed .menu_wrap .menuItem { transition: all 0.3s; width: 0; display: none; opacity: 0; } #header.fixed .menu_wrap .menuItem.open { width: 100%; display: flex; opacity: 1; } #header.fixed .menu_wrap #menuBtn { display: flex; } #header.fixed .menu_wrap #menuBtn.open { display: none; } #hrader_open { height: 100vh; background-color: #F3F8FD; background-image: url("/images/project/176/megamenu_bg.png"); background-size: contain; background-position: top right; background-repeat: no-repeat; position: fixed; width: 100%; left: 100%; right: 0; transition: all 0.3s; z-index: -1; opacity: 0; top: 0; } #hrader_open.open { left: 0; opacity: 1; z-index: 99999; display: block; } #hrader_open .headerTop { padding: 1.823vw 0 4.167vw; padding: 1.823vw 0 3.167vw; } #hrader_open .headerTop .logo_wrap { display: flex; align-items: center; justify-content: space-between; } #hrader_open .headerTop .logo_wrap > a { display: flex; align-items: center; max-width: 6.667vw; } #hrader_open .headerTop .logo_wrap > a img { max-width: 100%; } #hrader_open .headerTop .funch { display: flex; align-items: center; justify-content: flex-end; } #hrader_open .headerTop .funch #cart_area { color: #174272; font-size: clamp(16px, 0.833vw, 16px); position: relative; display: flex; align-items: center; justify-content: center; width: max(2.083vw, 25px); height: max(2.083vw, 25px); transition: all 0.3s; position: relative; background-color: #AFD6F3; margin-left: 0.78125vw; border-radius: 50%; display: none !important; } #hrader_open .headerTop .funch #cart_area:hover::before { left: 100%; opacity: 1; } #hrader_open .headerTop .funch #cart_area .badge-danger { padding: 0; font-size: 16px; font-size: clamp(16px, 0.833vw, 16px); font-size: 12px; color: #ffffff; position: initial; background-color: #174272; display: flex; align-items: center; justify-content: center; font-weight: 400; padding: 0; width: 15px; height: 15px; border-radius: 50%; position: absolute; bottom: 0; right: 0; } #hrader_open .headerTop .funch #closeOpenBtn { width: max(2.34375vw, 25px); height: max(2.34375vw, 25px); border-radius: 50%; background-color: #AFD6F3; display: flex; align-items: center; justify-content: center; flex-direction: column; margin-left: 1.302vw; overflow: hidden; position: relative; transition: all 0.3s; } #hrader_open .headerTop .funch #closeOpenBtn:hover { cursor: pointer; background-color: #174272; } #hrader_open .headerTop .funch #closeOpenBtn:hover .iconBar { background-color: #ffffff; } #hrader_open .headerTop .funch #closeOpenBtn .iconBar { width: max(0.9375vw, 10px); height: max(0.104vw, 1px); height: 1px; background-color: #1C5EA2; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); } #hrader_open .headerTop .funch #closeOpenBtn .iconBar:last-child { transform: translate(-50%, -50%) rotate(-45deg); } #hrader_open .headerCenter .open_menu_wrap { display: block; } #hrader_open .headerCenter .open_menu_wrap .menu_nav { padding: 0; margin: 0; list-style: none; position: relative; display: flex; align-items: stretch; justify-content: flex-start; flex-wrap: wrap; margin: 0 -15px; } #hrader_open .headerCenter .open_menu_wrap .menu_nav > li { width: 25%; padding: 0 15px; margin-bottom: 2.125vw; } #hrader_open .headerCenter .open_menu_wrap .menu_nav > li .title { color: #174272; font-size: clamp(16px, 1.25vw, 24px); font-weight: 600; line-height: 1.2; padding-bottom: 1.042vw; margin-bottom: 1.5625vw; text-transform: uppercase; display: block; position: relative; } #hrader_open .headerCenter .open_menu_wrap .menu_nav > li .title::before { content: ""; position: absolute; top: 100%; width: 100%; height: 3px; background-color: #AFD6F3; left: 0; right: 0; } #hrader_open .headerCenter .open_menu_wrap .menu_nav > li ul { padding: 0; padding-left: 1.042vw; margin: 0; list-style: none; } #hrader_open .headerCenter .open_menu_wrap .menu_nav > li ul li a { font-size: clamp(16px, 0.833vw, 16px); color: #4D4D4D; line-height: 1.2; margin-bottom: 0.78125vw; display: block; transition: all 0.3s; } #hrader_open .headerCenter .open_menu_wrap .menu_nav > li ul li a:hover { color: #062542; font-weight: 600; } #hrader_open .headerCenter .open_menu_wrap .menu_nav > li ul li ul { display: none !important; } #hrader_open .headerBottom { position: relative; padding-top: 2.34375vw; } #hrader_open .headerBottom::before { content: ""; position: absolute; left: 50%; top: 0; width: calc(83.3333333% - 30px); height: 1px; background-color: #174272; transform: translateX(-50%); } #hrader_open .headerBottom .funch { display: flex; align-items: center; justify-content: space-between; } #hrader_open .headerBottom .funch #search_area ul { padding: 0; margin: 0; } #hrader_open .headerBottom .funch #search_area ul .input-group { flex-direction: row-reverse; } #hrader_open .headerBottom .funch #search_area ul .input-group .input-group-append { background: transparent; padding: 0; } #hrader_open .headerBottom .funch #search_area ul .input-group .input-group-append .btn { padding: 0; background: transparent; padding-right: 1.042vw; border: none; font-size: 24px; font-size: clamp(16px, 1.25vw, 24px); font-size: 16px; display: flex; align-items: center; justify-content: center; color: #4D4D4D; } #hrader_open .headerBottom .funch #search_area ul .input-group .form-control { background: transparent; color: #4D4D4D; height: auto; padding: 0; border-radius: 0; border: none; } #hrader_open .headerBottom .funch #search_area ul .input-group .form-control::-moz-placeholder { color: #4D4D4D; } #hrader_open .headerBottom .funch #search_area ul .input-group .form-control:-ms-input-placeholder { color: #4D4D4D; } #hrader_open .headerBottom .funch #search_area ul .input-group .form-control::placeholder { color: #4D4D4D; } #hrader_open .headerBottom .funch #language_textlist { max-width: none; } #hrader_open .headerBottom .funch #language_textlist > div { display: flex; align-items: center; justify-content: flex-end; } #hrader_open .headerBottom .funch #language_textlist span.separate_line { color: #00429D; color: transparent; margin: 0 0.521vw; } #hrader_open .headerBottom .funch #language_textlist a { color: #4D4D4D; font-size: clamp(12px, 0.833vw, 16px); transition: all 0.3s; padding: 5px 15px; border-radius: 30px; } #hrader_open .headerBottom .funch #language_textlist a:hover { color: #174272; } #hrader_open .headerBottom .funch #language_textlist a.active { color: #174272; font-weight: 600; background-color: #AFD6F3; } } @-webkit-keyframes header { 0% { opacity: 0; transform: translate(-50%, -30px); } 100% { opacity: 1; transform: translate(-50%, 0); } } @keyframes header { 0% { opacity: 0; transform: translate(-50%, -30px); } 100% { opacity: 1; transform: translate(-50%, 0); } } .bannerBox { position: relative; } .bannerBox .SideNav { display: flex; align-items: center; justify-content: center; flex-direction: column; position: absolute; top: 50%; right: 15px; transform: translateY(-50%); } .bannerBox .SideNav .bottomWrap { width: 25px; height: auto; display: flex; align-items: center; justify-content: center; flex-direction: column; } .bannerBox .SideNav .bottomWrap .slick-arrow { background: transparent; border: none; padding: 0; padding: max(1.042vw, 10px) 0; position: relative; display: flex; align-items: center; justify-content: center; } .bannerBox .SideNav .bottomWrap .slick-arrow.banner_prev svg { transform: rotate(90deg); } .bannerBox .SideNav .bottomWrap .slick-arrow.banner_next svg { transform: rotate(90deg); } .bannerBox .SideNav .bottomWrap .slick-arrow:hover svg path { fill: #2BA3E2; } .bannerBox .SideNav .bottomWrap .slick-arrow + .slick-arrow::before { content: ""; line-height: 1; background-color: rgba(196, 196, 196, 0.5); position: absolute; width: 12px; height: 1px; left: 50%; top: 0%; transform: translate(-50%, -50%); } .bannerBox .SideNav .bottomWrap .slick-arrow svg { width: max(0.865vw, 10px) !important; } .bannerBox .SideNav .bottomWrap .slick-arrow svg path { transition: all 0.3s; } .bannerBox #scroll { display: flex; align-items: center; justify-content: center; flex-direction: column; position: absolute; bottom: 13%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; width: 65px; height: 120px; border-radius: 40px; width: max(3.385vw, 35px); height: max(6.25vw, 80px); width: 60px; width: 3.125vw; width: max(3.125vw, 35px); height: max(4.6875vw, 60px); border-radius: max(2.083vw, 15px); background-color: rgba(248, 248, 248, 0.5); border: 1px solid #ffffff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-animation: borderPulse 2.5s ease-in-out infinite; animation: borderPulse 2.5s ease-in-out infinite; } .bannerBox #scroll .icon { width: 35px; height: 35px; width: 30px; height: 30px; width: max(1.5625vw, 20px); height: max(1.5625vw, 20px); background-color: #AFD6F3; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .bannerBox #scroll .icon svg { transform: rotate(90deg); width: 13px; width: 0.677vw; width: max(0.677vw, 8px); -webkit-animation: arrowMove 1.8s ease-in-out infinite; animation: arrowMove 1.8s ease-in-out infinite; } .bannerBox #scroll .txt { font-size: clamp(16px, 0.833vw, 16px); color: #174272; line-height: 1; margin-bottom: 1.042vw; margin-bottom: 0.521vw; -webkit-animation: textNudge 2.5s ease-in-out infinite; animation: textNudge 2.5s ease-in-out infinite; } .bannerBox #banner_block .splide__track .splide__list .splide__slide.is-active .banner_summary .BannerBgTxtBox { -webkit-animation: BannerBgTxtBox 1s ease-in-out; animation: BannerBgTxtBox 1s ease-in-out; } .bannerBox #banner_block .splide__track .splide__list .splide__slide.is-active .banner_summary .BannerTxtBox { -webkit-animation: BannerTxtBox 1s ease-in-out 1s; animation: BannerTxtBox 1s ease-in-out 1s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .bannerBox #banner_block .splide__track .splide__list .splide__slide.is-active .banner_summary .BannerImgBox { -webkit-animation: BannerTxtBox 1s ease-in-out 1s; animation: BannerTxtBox 1s ease-in-out 1s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; width: 48.4375vw; } .bannerBox .banner_sub { margin-bottom: 0; } .bannerBox .banner_sub .slick-list .slick-track .slick-slide { display: flex; align-items: center; } .bannerBox .banner_sub .slick-list .slick-track .slick-slide > div { display: flex; align-items: center; width: 100%; } .bannerBox .banner_sub .slick-list .slick-track .slick-slide.slick-current .banner_summary .BannerBgTxtBox { -webkit-animation: BannerBgTxtBox 1s ease-in-out; animation: BannerBgTxtBox 1s ease-in-out; } .bannerBox .banner_sub .slick-list .slick-track .slick-slide.slick-current .banner_summary .BannerTxtBox { -webkit-animation: BannerTxtBox 1s ease-in-out 1s; animation: BannerTxtBox 1s ease-in-out 1s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .bannerBox .banner_sub .slick-list .slick-track .slick-slide.slick-current .banner_summary .BannerImgBox { -webkit-animation: BannerTxtBox 1s ease-in-out 1s; animation: BannerTxtBox 1s ease-in-out 1s; -webkit-animation-iteration-count: 1; animation-iteration-count: 1; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; width: 48.4375vw; } .bannerBox .banner_sub .slick-dots { position: absolute; bottom: max(4.167vw, 15px); display: flex; align-items: center; width: 80%; left: 50%; transform: translateX(-50%); } @media (max-width: 767px) { .bannerBox .banner_sub .slick-dots { justify-content: center; } } .bannerBox .banner_sub .slick-dots li { margin: 0; position: relative; padding: 0 0.78125vw; transition: all 0.3s; width: auto; } .bannerBox .banner_sub .slick-dots li.slick-active { margin-right: 10.417vw; } .bannerBox .banner_sub .slick-dots li.slick-active button::after { width: 7.8125vw; } .bannerBox .banner_sub .slick-dots li button { width: auto; height: auto; padding: 0; opacity: 1; color: #FFFFFF; font-family: "Saira", Arial, Microsoft JhengHei, Helvetica, sans-serif; font-size: clamp(16px, 0.833vw, 16px); font-size: clamp(12px, 0.9375vw, 18px); } @media (max-width: 767px) { .bannerBox .banner_sub .slick-dots li button { color: #55B1E7; } } .bannerBox .banner_sub .slick-dots li button::after { content: ""; width: 0px; height: 1px; background-color: #ffffff; position: absolute; left: calc(100% + 1.5625vw); top: 50%; transition: all 0.3s; } @media (max-width: 767px) { .bannerBox .banner_sub .slick-dots li button::after { background-color: #55B1E7; } } .bannerBox .banner_sub .slick-dots li button::before { position: initial; content: "0"; color: #FFFFFF; font-family: "Saira", Arial, Microsoft JhengHei, Helvetica, sans-serif; font-size: clamp(12px, 0.9375vw, 18px); opacity: 1; } @media (max-width: 767px) { .bannerBox .banner_sub .slick-dots li button::before { color: #55B1E7; } } .bannerBox .banner_wrap { padding-left: 0; } .bannerBox.layout_banner { position: relative; } .bannerBox.layout_banner.no_banner .layout_title_wrap { position: initial; transform: none; padding-top: max(4.167vw, 30px); } .bannerBox.layout_banner.no_banner .layout_title_wrap .item .title { color: #222222; } .bannerBox.layout_banner.no_banner #bread_area a { color: #222222; } .bannerBox.layout_banner.no_banner #bread_area .breadcrumb-item + .breadcrumb-item::before { color: #222222; } .bannerBox.layout_banner #banner .splide__pagination { display: none !important; } .bannerBox #banner { position: relative; } .bannerBox #banner .splide__pagination { bottom: 135px; width: calc(83.33333333% - 30px); display: flex; align-items: center; justify-content: flex-end; } .bannerBox #banner .splide__pagination li .splide__pagination__page { width: 60px; height: 6px; border-radius: 3px; background-color: #C3D1DB; margin: 0; margin-left: 20px; } .bannerBox #banner .splide__pagination li .splide__pagination__page.is-active { background-color: #AFD6F3 !important; } .bannerBox #banner .banner_summary { background: transparent; padding: 0; position: initial; } .bannerBox #banner .banner_summary .BannerBgTxtBox { position: absolute; top: 5%; left: 50%; transform: translateX(-50%); } .bannerBox #banner .banner_summary .BannerBgTxtBox .bgTxt { font-weight: 600; font-size: 17.708vw; background: linear-gradient(180deg, #EDF7FC, rgba(237, 247, 252, 0.05)); background-size: 100% 200%; -webkit-animation: gradientShift 2s linear infinite alternate; animation: gradientShift 2s linear infinite alternate; background-clip: text; -webkit-background-clip: text; color: transparent; opacity: 0.6; } .bannerBox #banner .banner_summary .BannerTxtBox { width: 32.8125vw; position: absolute; top: 55%; left: 10.677vw; transform: translateY(-50%); opacity: 0; } @media (max-width: 1280px) { .bannerBox #banner .banner_summary .BannerTxtBox { width: 40vw; } } @media (max-width: 991px) { .bannerBox #banner .banner_summary .BannerTxtBox { width: 100%; left: 50%; transform: translate(-50%, -50%); } .bannerBox #banner .banner_summary .BannerTxtBox .item { display: flex; flex-direction: column; align-items: center; justify-content: center; } .bannerBox #banner .banner_summary .BannerTxtBox .item .title { text-align: center !important; } .bannerBox #banner .banner_summary .BannerTxtBox .item .txt ul { justify-content: center; } } .bannerBox #banner .banner_summary .BannerTxtBox .item .title { font-size: 3.229vw; font-size: clamp(24px, 3.229vw, 62px); color: #070707; font-weight: 600; line-height: 1.2; margin-bottom: 1.5625vw; text-transform: uppercase; text-align: right; position: relative; } .bannerBox #banner .banner_summary .BannerTxtBox .item .title::before { content: ""; position: absolute; top: -8.073vw; left: 0; background-image: url("/images/project/176/banner_icon.png"); background-size: contain; background-position: center center; background-repeat: no-repeat; width: 12.135vw; height: 15.052vw; } .bannerBox #banner .banner_summary .BannerTxtBox .item .txt { color: #070707; font-weight: 600; font-size: clamp(16px, 0.833vw, 16px); text-transform: uppercase; } .bannerBox #banner .banner_summary .BannerTxtBox .item .txt ul { display: flex; align-items: center; justify-content: flex-end; padding: 0; margin: 0; list-style: none; margin: 0 -1.5625vw; } .bannerBox #banner .banner_summary .BannerTxtBox .item .txt ul li { padding: 0 1.5625vw; position: relative; text-align: center; white-space: nowrap; } .bannerBox #banner .banner_summary .BannerTxtBox .item .txt ul li + li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 40px; height: max(2.083vw, 20px); background-color: #AFD6F3; } .bannerBox #banner .banner_summary .BannerVideoBox { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: max(6.51vw, 50px); height: max(6.51vw, 50px); } .bannerBox #banner .banner_summary .BannerVideoBox .item a { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; width: 100%; height: 100%; } .bannerBox #banner .banner_summary .BannerVideoBox .item .icon img { max-width: 100%; } .bannerBox .scrollBox { display: flex; align-items: center; justify-content: center; } .bannerBox .scrollBox #scroll { display: flex; align-items: center; justify-content: center; flex-direction: column; } .bannerBox .scrollBox #scroll .txt { font-size: clamp(15px, 0.9375vw, 18px); color: #005E3C; font-weight: 600; } .SideFixBox { position: fixed; right: 15px; top: 50%; transform: translateY(-50%); z-index: 999; transition: all 0.3s; display: flex; align-items: flex-end; flex-direction: column; justify-content: center; } .SideFixBox ul { padding: 0; margin: 0; list-style: none; display: flex; flex-direction: column; align-items: flex-end; } .SideFixBox ul li { margin: 5px 0; display: flex; align-items: center; justify-content: flex-end; } .SideFixBox ul li a { display: flex; align-items: center; justify-content: flex-start; width: 55px; height: 55px; padding: 10px; background-color: #005E3C; border-radius: 30px; transition: all 0.3s; } .SideFixBox ul li a:hover { border-top-right-radius: 0; border-bottom-right-radius: 0; width: 190px; transform: translateX(15px); } .SideFixBox ul li a:hover .txt { display: block; } .SideFixBox ul li a .icon { width: 35px; height: 35px; background-color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .SideFixBox ul li a .txt { color: #ffffff; margin: 0 25px; display: none; font-size: clamp(15px, 0.9375vw, 18px); white-space: nowrap; transition: all 0.3s; } .SideFixBox ul li a svg { width: 28px !important; width: max(1.458vw, 15px) !important; } .SideFixBox #gotop_animate { margin-bottom: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 15px; } .SideFixBox #gotop_animate .icon { margin-bottom: 10px; } .SideFixBox #gotop_animate .txt { color: #C4C4C4; font-size: 16px; position: relative; text-transform: uppercase; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; font-family: "Russo One"; } .SideFixBox #gotop_animate .txt::before { content: ""; position: absolute; left: 0px; width: 1px; background-color: #C4C4C4; height: 100%; top: 0; bottom: 0; } @media (max-width: 991px) { #header::before { width: calc(100% - 30px); } #header .logo_wrap { padding-left: 15px; display: flex; align-items: center; justify-content: center; } #header .logo_wrap > a { width: 150px; margin: 0; } .SideFixBox .sociallink li { padding: 10px 0; } #hrader_open .headerBottom::before { width: calc(100% - 30px); } } @media (max-width: 767px) { #hrader_open { display: none !important; } .bannerBox #scroll { display: none; } .bannerBox #banner .banner_summary { position: initial; } .bannerBox #banner .banner_summary .BannerTxtBox { top: 15%; transform: none; left: 15px !important; width: calc(100% - 30px); } .bannerBox #banner .banner_summary .BannerTxtBox .item { display: flex; flex-direction: column; align-items: center; justify-content: center; } .bannerBox #banner .banner_summary .BannerTxtBox .item .title { font-size: 36px; text-align: center; } .bannerBox #banner .banner_summary .BannerTxtBox .item .title::before { top: -5.073vw; left: -15px; } .bannerBox #banner .banner_summary .BannerTxtBox .item .txt { font-size: 14px; } .bannerBox #banner .banner_summary .BannerTxtBox .item .txt ul { flex-wrap: wrap; justify-content: center; } .bannerBox #banner .banner_summary .BannerTxtBox .item .txt ul li { padding: 0 15px; width: 50%; } .bannerBox #banner .banner_summary .BannerBgTxtBox { transform: translate(-50%, 70%); } .bannerBox #banner .banner_summary .BannerImgBox { width: 100% !important; right: auto; left: 50%; transform: translateX(-50%); } .bannerBox #banner .splide__pagination { width: 100%; height: initial; position: absolute; right: 0; left: 0; bottom: 0; top: auto; transform: none; flex-direction: row; padding: 20px 15px; justify-content: flex-start; display: none !important; } .bannerBox #banner .splide__pagination .splide__arrows .splide__arrow.splide__arrow--prev { left: 20px; top: 50%; transform: translateY(-50%); } .bannerBox #banner .splide__pagination .splide__arrows .splide__arrow.splide__arrow--prev svg { transform: rotate(180deg); } .bannerBox #banner .splide__pagination .splide__arrows .splide__arrow.splide__arrow--next { top: 50%; transform: translateY(-50%); bottom: auto; right: 20px; left: auto; } .bannerBox #banner .splide__pagination .splide__arrows .splide__arrow.splide__arrow--next svg { transform: rotate(0deg); } .bannerBox #banner .splide__pagination li .splide__pagination__page { margin: 0 10px; } .SideFixBox ul { display: none !important; } } #videoModal { overflow: hidden; } #videoModal .modal-dialog { max-width: 46.875vw; height: 100%; display: flex; align-items: center; } @media (max-width: 991px) { #videoModal .modal-dialog { max-width: 90%; } } #videoModal .modal-content { background: transparent; border: none; } #videoModal .modal-content .modal-header { padding: 0; background-color: transparent; border: none; position: absolute; bottom: 100%; right: 0; } #videoModal .modal-content .modal-header .close { margin: 0 0 0 auto; color: #ffffff; text-shadow: none; padding: 10px 0; } #videoModal .modal-content .modal-body { padding: 0; } #footer { position: relative; background-color: #F3F8FD; } #footer .ContactBox { width: 100%; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 2.604vw 0; z-index: 2; } #footer .ContactBox::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(83.33333% - 30px); height: 100%; background: linear-gradient(115deg, rgba(208, 225, 234, 0.2), rgba(134, 171, 188, 0.3)), rgba(255, 255, 255, 0.7); border: 1px solid #FFFFFF; border-radius: max(1.5625vw, 15px); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } #footer .ContactBox .title_wrap { display: flex; align-items: center; justify-content: center; } #footer .ContactBox .title_wrap .item { padding: 1.5625vw; padding-left: 2.604vw; border-radius: 2.604vw; background-color: #FFFFFF; } #footer .ContactBox .title_wrap .item .title { font-size: clamp(26px, 4.167vw, 80px); font-size: clamp(26px, 2.5vw, 48px); color: #070707; line-height: 1; font-weight: 600; white-space: nowrap; text-transform: initial; position: relative; } #footer .ContactBox .title_wrap .item .title::before { content: ""; position: absolute; left: -1.823vw; top: -1.5625vw; left: -1vw; top: -0.8vw; background-image: url("/images/project/176/title_icon.png"); background-repeat: no-repeat; background-size: cover; width: 59px; height: 74px; width: max(3.073vw, 22px); height: max(3.854vw, 29px); } #footer .ContactBox .title_wrap .item .title.animated span { -webkit-animation: leftIn 1s both; animation: leftIn 1s both; } #footer .ContactBox .txt_wrap { display: flex; align-items: center; } #footer .ContactBox .txt_wrap.more_wrap .item { margin-left: 3.646vw; } #footer .ContactBox .txt_wrap .item .subTitle { color: #174272; font-size: clamp(16px, 1.25vw, 24px); font-weight: 600; line-height: 1.2; margin-bottom: 1.302vw; } #footer .ContactBox .txt_wrap .item .txt { font-size: clamp(16px, 0.833vw, 16px); color: #4D4D4D; line-height: 1.2; } #footer .ContactBox .more { display: flex; align-items: center; } #footer .ContactBox .more a { display: flex; align-items: center; color: #174272; transition: all 0.3s; font-size: clamp(16px, 0.833vw, 16px); } #footer .ContactBox .more a .moreTxt { margin-left: 0.78125vw; transition: all 0.3s; } #footer .ContactBox .more a .icon { display: flex; align-items: center; justify-content: center; transition: all 0.3s; width: 28px; height: 28px; width: max(1.458vw, 20px); height: max(1.458vw, 20px); background-color: #AFD6F3; border-radius: 50%; } #footer .ContactBox .more a .icon svg { width: 100%; transition: 0.35s; width: 8px; width: max(0.417vw, 5px); } #footer .ContactBox .more a:hover { background-color: #AFD6F3; border-radius: 30px; } #footer .ContactBox .more a:hover .moreTxt { margin-right: 1.5625vw; } #footer .footer_top { position: relative; z-index: 1; padding: 11.458vw 0 2.083vw; overflow: hidden; } #footer .footer_top::before { content: ""; position: absolute; top: 0; left: 0; transform: translate(-50%, -50%); width: 55vw; height: 55vw; background-image: url("/images/project/176/circle.png"); background-position: center center; background-size: cover; background-repeat: no-repeat; } #footer .footer_top .footer_logo_wrap .item { display: flex; align-items: center; } #footer .footer_top .footer_logo_wrap .item > a { max-width: 10.9375vw; max-width: 10.417vw; width: 10.417vw; } #footer .footer_top .footer_logo_wrap .item > a img { max-width: 100%; width: 100%; } #footer .footer_top .information { display: flex; align-items: stretch; flex-wrap: wrap; padding-left: 4.167vw; } #footer .footer_top .information .item { width: 50%; margin-bottom: 1.823vw; } #footer .footer_top .information .item .company_name { font-size: clamp(16px, 1.25vw, 24px); color: #174272; font-weight: 600; line-height: 1; margin-bottom: 0.78125vw; text-transform: uppercase; } #footer .footer_top .information ul { padding: 0; margin: 0; list-style: none; } #footer .footer_top .information ul li { margin-bottom: 0.78125vw; font-size: clamp(16px, 0.833vw, 16px); color: #767676; display: flex; align-items: baseline; line-height: 1.2; } #footer .footer_top .information ul li:last-child { margin-bottom: 0; } #footer .footer_top .information ul li a { color: #767676; transition: all 0.3s; position: relative; } #footer .footer_top .information ul li a:hover { color: #174272; } #footer .footer_top .information ul li .icon { font-size: clamp(16px, 0.833vw, 16px); font-size: clamp(14px, 0.9375vw, 18px); font-size: clamp(15px, 1.042vw, 20px); color: #174272; width: max(1.042vw, 20px); min-width: max(1.042vw, 20px); display: flex; align-items: center; justify-content: center; margin-right: 1.042vw; } #footer .footer_top .top_wrap { display: flex; justify-content: flex-end; } #footer .footer_top .top_wrap #gotop_animate { display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; width: 65px; height: 120px; border-radius: 40px; width: max(3.385vw, 35px); height: max(6.25vw, 80px); border-radius: max(2.083vw, 15px); background-color: #AFD6F3; cursor: pointer; } #footer .footer_top .top_wrap #gotop_animate .icon { width: 35px; height: 35px; width: max(1.823vw, 25px); height: max(1.823vw, 25px); background-color: #ffffff; border-radius: 50%; display: flex; align-items: center; justify-content: center; } #footer .footer_top .top_wrap #gotop_animate .icon svg { transform: rotate(-90deg); width: 13px; width: 0.677vw; width: max(0.677vw, 8px); } #footer .footer_top .top_wrap #gotop_animate .txt { font-size: clamp(16px, 0.833vw, 16px); font-size: 21px; font-size: 1.09375vw; font-size: clamp(14px, 1.09375vw, 21px); color: #174272; line-height: 1; margin-top: 1.042vw; } #footer .footer_center { padding: 0.78125vw 0; position: relative; } #footer .footer_center::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: calc(83.33333% - 30px); height: 1px; background-color: #1C5EA2; } #footer .footer_center::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(83.33333% - 30px); height: 1px; background-color: #1C5EA2; } #footer .footer_center .footer_menu_wrap { display: flex; align-items: center; } #footer .footer_center .footer_menu_wrap #menu_bottom { display: flex; align-items: stretch; width: 100%; } #footer .footer_center .footer_menu_wrap #menu_bottom > ul { display: flex; align-items: center; flex-wrap: wrap; width: 100%; } #footer .footer_center .footer_menu_wrap #menu_bottom > ul li { display: flex; margin-bottom: 0; margin-right: 1.042vw; } #footer .footer_center .footer_menu_wrap #menu_bottom > ul li + li::before { display: none; } #footer .footer_center .footer_menu_wrap #menu_bottom > ul li a { color: #2C2C2C; padding: 0; transition: all 0.3s; font-size: clamp(16px, 0.833vw, 16px); text-transform: uppercase; white-space: nowrap; position: relative; } #footer .footer_center .footer_menu_wrap #menu_bottom > ul li a:hover { color: #174272; } #footer .footer_center .social_wrap { display: flex; align-items: center; justify-content: flex-end; } #footer .footer_center .social_wrap .sociallink { display: flex; align-items: center; justify-content: flex-end; padding: 0; margin: 0; list-style: none; flex: auto; max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; } #footer .footer_center .social_wrap .sociallink li { margin-left: max(0.78125vw, 7.5px); } #footer .footer_center .social_wrap .sociallink li:nth-child(2) a { color: #FF0000; background-color: #F3F8FD; border-color: #FF0000; } #footer .footer_center .social_wrap .sociallink li a { margin: 0 !important; font-size: clamp(16px, 1.25vw, 24px); font-size: 18px; font-size: 0.9375vw; font-size: clamp(15px, 0.9375vw, 18px); color: #F3F8FD; border: 1px solid #0274B3; background-color: #0274B3; transition: all 0.3s; width: 32px; height: 32px; width: max(1.667vw, 25px); height: max(1.667vw, 25px); display: flex; align-items: center; justify-content: center; border-radius: 50%; } #footer .footer_center .social_wrap .sociallink li a i { transition: all 0.3s; } #footer .footer_bottom { position: relative; padding: 1.042vw 0 2.34375vw; } #footer .footer_bottom .copy_box { position: relative; } #footer .footer_bottom .copy_box .item { display: flex; align-items: center; justify-content: space-between; } #footer .footer_bottom .copy_right_box { display: flex; align-items: center; } #footer .footer_bottom .copy_right_box .privacy { display: flex; align-items: center; } #footer .footer_bottom .copy_right_box .privacy a { font-size: clamp(12px, 0.729vw, 14px); font-size: 12px; color: #7C7C7C; } #footer .footer_bottom .copy_right_box .privacy a + a::before { content: "|"; color: #7C7C7C; margin: 0 0.625vw; } #footer .footer_bottom .copy_right_box #copyright { font-size: clamp(12px, 0.729vw, 14px); font-size: 12px; color: #7C7C7C; text-align: left; } #footer .footer_bottom .copy_right_box #copyright a { color: #7C7C7C; } @media (max-width: 991px) { #footer .ContactBox::before { width: calc(100% - 30px); } #footer .ContactBox .title_wrap { padding-left: 30px; } #footer .ContactBox .more_wrap { padding-right: 30px; } #footer .footer_top .footer_logo_wrap { padding-left: 30px; } #footer .footer_top .top_wrap { padding-right: 30px; } #footer .footer_center { padding: 10px 15px; } #footer .footer_center::before { width: calc(100% - 60px); } #footer .footer_center::after { width: calc(100% - 60px); } #footer .footer_bottom { padding: 1.042vw 15px 2.34375vw; } } @media (max-width: 767px) { #footer .ContactBox { padding: 40px 15px; } #footer .ContactBox::before { width: calc(100% - 30px); } #footer .ContactBox .title_wrap { padding: 0 15px; margin-bottom: 20px; } #footer .ContactBox .title_wrap .item { padding: 10px 20px; padding-left: 30px; border-radius: 50px; } #footer .ContactBox .txt_wrap .item .subTitle { margin-bottom: 10px; } #footer .ContactBox .more_wrap { margin-top: 20px; padding: 0 15px; } #footer .footer_top { padding: 180px 0 0px; } #footer .footer_top .footer_logo_wrap { padding: 0 30px; margin-bottom: 20px; } #footer .footer_top .footer_logo_wrap .item { display: flex; align-items: stretch; justify-content: space-between; } #footer .footer_top .footer_logo_wrap .item > a { max-width: 120px; width: 120px; } #footer .footer_top .footer_logo_wrap .item .top_wrap { display: block; padding: 0; } #footer .footer_top .information { padding: 0 30px; } #footer .footer_top .information .item { margin-bottom: 20px; } #footer .footer_top .information .item .company_name { margin-bottom: 10px; } #footer .footer_top .information .item ul li { margin-bottom: 7.5px; } #footer .footer_top .top_wrap { padding: 0 30px; display: none; } #footer .footer_center { padding: 20px 15px; } #footer .footer_center::before { width: calc(100% - 60px); width: 100%; } #footer .footer_center::after { width: calc(100% - 60px); width: 100%; } #footer .footer_center .footer_menu_wrap #menu_bottom > ul { flex-wrap: wrap; margin: 0 -15px; } #footer .footer_center .footer_menu_wrap #menu_bottom > ul li { width: 50%; margin: 0; padding: 0 15px; margin-bottom: 10px; } #footer .footer_center .social_wrap { justify-content: flex-start; } #footer .footer_center .social_wrap .sociallink li { margin-left: 0; margin-right: 10px; } #footer .footer_bottom { padding: 20px 15px; } #footer .footer_bottom .copy_box .item { flex-direction: column; align-items: flex-start; } #footer .footer_bottom .copy_box .item #copyright { margin-bottom: 10px; } } @media (min-width: 768px) { .menu_wrap { display: flex; align-items: center; justify-content: flex-end; } .menu_wrap .menuItem { display: flex; align-items: center; justify-content: flex-end; } .menu_wrap #smartMenusBt4 { padding: 0; } .menu_wrap #smartMenusBt4 .mobile_menu_top { display: none; } .menu_wrap #smartMenusBt4 #main-menu { padding-left: 0px; padding-right: 0px; border-radius: 0px; background-color: transparent; } .menu_wrap #smartMenusBt4 #main-menu > li.serviceMenu > ul > li:last-child { display: none !important; } .menu_wrap #smartMenusBt4 #main-menu > li > ul { transform: translate(-50%, 3.125vw); left: 50% !important; } .menu_wrap #smartMenusBt4 #main-menu > li > a { font-size: clamp(16px, 0.833vw, 16px); font-size: clamp(16px, 0.9375vw, 18px); font-size: 18px; line-height: 1.5; color: #2C2C2C; position: relative; padding: 0.521vw 0; margin: 0 0.521vw; transition: all 0.3s; transition: color 0.2s ease; font-family: "DM Sans", Arial, Microsoft JhengHei, Helvetica, sans-serif; position: relative; } } @media (min-width: 768px) and (max-width: 1199px) { .menu_wrap #smartMenusBt4 #main-menu > li > a { font-size: clamp(16px, 0.9375vw, 18px); } } @media (min-width: 768px) { .menu_wrap #smartMenusBt4 #main-menu > li > a::before { content: ""; position: absolute; bottom: 0; right: 0; height: 3px; width: 0; background-color: #174272; transition: width 0.4s cubic-bezier(0.51, 0.18, 0, 0.88) 0.1s; } } @media (min-width: 768px) { .menu_wrap #smartMenusBt4 #main-menu > li > a::after { content: ""; position: absolute; bottom: 0; right: 0; height: 3px; width: 0; background-color: #AFD6F3; transition: width 0.2s cubic-bezier(0.29, 0.18, 0.26, 0.83); } } @media (min-width: 768px) { .menu_wrap #smartMenusBt4 #main-menu > li > a.highlighted, .menu_wrap #smartMenusBt4 #main-menu > li > a:hover { color: #174272; font-weight: 600; } .menu_wrap #smartMenusBt4 #main-menu > li > a.highlighted .sub-arrow, .menu_wrap #smartMenusBt4 #main-menu > li > a:hover .sub-arrow { transform: rotate(180deg); } .menu_wrap #smartMenusBt4 #main-menu > li > a.highlighted::before, .menu_wrap #smartMenusBt4 #main-menu > li > a:hover::before { width: 100%; left: 0; } .menu_wrap #smartMenusBt4 #main-menu > li > a.highlighted::after, .menu_wrap #smartMenusBt4 #main-menu > li > a:hover::after { width: 100%; left: 0; } } @media (min-width: 768px) { .menu_wrap #smartMenusBt4 #main-menu > li > a .sub-arrow { vertical-align: middle; right: 15px; width: 8px; height: 9.5px; display: inline-block; border: none; transition: all 0.3s; background-image: url(/images/project/716/arrow.svg); display: none !important; } } @media (min-width: 768px) { .menu_wrap #smartMenusBt4 #main-menu > li > a.has-submenu { display: flex; align-items: center; justify-content: center; } } @media (min-width: 768px) { .menu_wrap #smartMenusBt4 #main-menu li ul { background-color: transparent; border: none; border-radius: max(1.5625vw, 15px) !important; padding: 1.5625vw 15px; border: 1px solid #ffffff; min-width: 25em !important; max-width: 50em !important; } .menu_wrap #smartMenusBt4 #main-menu li ul::before, .menu_wrap #smartMenusBt4 #main-menu li ul::after { display: none; } .menu_wrap #smartMenusBt4 #main-menu li ul::after { content: ""; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; bottom: 0; right: 0; border-radius: max(1.5625vw, 15px); background: linear-gradient(115deg, rgba(208, 225, 234, 0.4), rgba(134, 171, 188, 0.3)), rgba(255, 255, 255, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: -1; border: none; } .menu_wrap #smartMenusBt4 #main-menu li ul li { border-bottom: 1px solid #FFFFFF; border: none; } .menu_wrap #smartMenusBt4 #main-menu li ul li:first-child a { border-top-left-radius: 10px !important; border-top-right-radius: 10px !important; overflow: hidden; } .menu_wrap #smartMenusBt4 #main-menu li ul li:last-child { border: none; } .menu_wrap #smartMenusBt4 #main-menu li ul li:last-child a { border-bottom-left-radius: 10px !important; border-bottom-right-radius: 10px !important; overflow: hidden; } .menu_wrap #smartMenusBt4 #main-menu li ul li a { font-size: clamp(16px, 0.833vw, 16px); font-size: clamp(16px, 0.9375vw, 18px); line-height: 1.5; color: #2C2C2C; padding: 10px; transition: all 0.3s; text-align: center; white-space: nowrap; } .menu_wrap #smartMenusBt4 #main-menu li ul li a > .sub-arrow { border-color: transparent transparent transparent transparent; } .menu_wrap #smartMenusBt4 #main-menu li ul li a.highlighted, .menu_wrap #smartMenusBt4 #main-menu li ul li a:hover { opacity: 1; background-color: transparent; color: #174272; font-weight: 600; } .menu_wrap #smartMenusBt4 #main-menu li ul li a.highlighted::before, .menu_wrap #smartMenusBt4 #main-menu li ul li a:hover::before { opacity: 1; } .menu_wrap #smartMenusBt4 #main-menu li ul li a.highlighted > .sub-arrow, .menu_wrap #smartMenusBt4 #main-menu li ul li a:hover > .sub-arrow { border-color: transparent transparent transparent transparent; } } @media (max-width: 767px) { #smartmenu_v2_overlay { display: none !important; } #header { padding-top: 0px; padding-bottom: 0px; z-index: 999; } #header .logo_wrap > a { display: none; } #header .funch { display: none; } #header .menu_wrap { padding: 0; } #header .menu_wrap .mobile_logo_wrap { display: flex; align-items: center; } #header .menu_wrap .mobile_logo_wrap a .logo_img { padding-right: 30px; max-height: 55px; } #header .menu_wrap #smartMenusBt4 { position: fixed; top: 0px; left: 0px; right: 0px; z-index: 9; padding: 0px; transition: ease-in-out 0.3s; z-index: 9999; height: 70px; padding: 0 15px; background-color: transparent; } #header .menu_wrap #smartMenusBt4::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: calc(100% - 30px); height: 100%; border: 1px solid #FFFFFF; background: linear-gradient(115deg, rgba(208, 225, 234, 0.4), rgba(134, 171, 188, 0.3)), rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom-left-radius: max(1.5625vw, 15px); border-bottom-right-radius: max(1.5625vw, 15px); z-index: -1; opacity: 0.9; } #header .menu_wrap #smartMenusBt4 .funch { display: flex; } #header .menu_wrap #smartMenusBt4 .funch #search_block { margin: 0 20px; } #header .menu_wrap #smartMenusBt4 .funch #language_icondropdown { margin: 0 20px; } #header .menu_wrap #smartMenusBt4 .funch #cart_area { position: relative; margin: 0 20px; } #header .menu_wrap #smartMenusBt4 .funch #cart_area::before { content: ""; width: 1px; height: 100%; position: absolute; background-color: #000000; left: -20px; top: 0; } #header .menu_wrap #smartMenusBt4 .funch #cart_area::after { content: ""; width: 1px; height: 100%; position: absolute; background-color: #000000; right: -20px; top: 0; } } @media (max-width: 767px) and (max-width: 767px) { #header .menu_wrap #smartMenusBt4 .mobileLeft { display: none; } #header .menu_wrap #smartMenusBt4 .collapseBox { width: 100%; } } @media (max-width: 767px) { #header .menu_wrap #smartMenusBt4 .navbar-header { display: flex !important; justify-content: space-between; width: 100%; background-color: transparent; padding: 0px 0px 0px 15px; height: 100%; } #header .menu_wrap #smartMenusBt4 .navbar-header > a { display: flex; height: 100%; align-items: center; } #header .menu_wrap #smartMenusBt4 .navbar-header .logo_img { padding-top: 10px; padding-bottom: 10px; } } @media (max-width: 767px) and (max-width: 480px) { #header .menu_wrap #smartMenusBt4 .navbar-header { align-items: center; } } @media (max-width: 767px) { #header .menu_wrap #smartMenusBt4 .navbar-header a img { max-width: 100%; padding-right: 30px; max-height: 55px; } } @media (max-width: 767px) and (max-width: 1199px) { #header .menu_wrap #smartMenusBt4 .navbar-header a img:nth-child(1) { display: none !important; } } @media (max-width: 767px) and (max-width: 480px) { #header .menu_wrap #smartMenusBt4 .navbar-header a img { max-width: 100%; padding-right: 30px; max-height: 55px; } } @media (max-width: 767px) { #header .menu_wrap #smartMenusBt4 .navbar-header #openBtn { padding-right: 0px; background-color: transparent; padding: 0px; background-color: #AFD6F3; width: 50px; height: 50px; border-radius: 50%; display: flex; align-items: center; flex-direction: column; justify-content: center; margin-top: 10px; margin-right: 10px; } } @media (max-width: 767px) and (max-width: 480px) { #header .menu_wrap #smartMenusBt4 .navbar-header #openBtn { padding-top: 12px; padding-bottom: 12px; } } @media (max-width: 767px) { #header .menu_wrap #smartMenusBt4 .navbar-header #openBtn .icon-bar { background-color: #174272; width: 25px; height: 2px; margin: 5px 0; } } @media (max-width: 767px) { #header .menu_wrap #smartMenusBt4 #main-menu { border-bottom: 0px; background-color: transparent; border-radius: 0px; padding: 0px; border: none; } #header .menu_wrap #smartMenusBt4 #main-menu > li { text-align: left; border: none; } #header .menu_wrap #smartMenusBt4 #main-menu > li.serviceMenu > ul > li:last-child { display: none !important; } #header .menu_wrap #smartMenusBt4 #main-menu > li > a { background-color: transparent; border-radius: 25px !important; width: 100%; font-family: "Saira", Arial, Microsoft JhengHei, Helvetica, sans-serif; font-family: "DM Sans", Arial, Microsoft JhengHei, Helvetica, sans-serif; color: #2C2C2C; padding: 20px 15px !important; border: none; text-transform: uppercase; } #header .menu_wrap #smartMenusBt4 #main-menu > li > a.highlighted { color: #174272; font-weight: 600; } #header .menu_wrap #smartMenusBt4 #main-menu > li > a.highlighted .sub-arrow::before { color: #174272; } #header .menu_wrap #smartMenusBt4 #main-menu > li > a.highlighted > span:first-child::before { opacity: 1; } #header .menu_wrap #smartMenusBt4 #main-menu > li > a > span:first-child { position: relative; } #header .menu_wrap #smartMenusBt4 #main-menu > li > a > span:first-child::before { content: ""; position: absolute; top: 100%; width: 100%; height: 3px; background-color: #AFD6F3; left: 0; right: 0; opacity: 0; transition: all 0.3s; } #header .menu_wrap #smartMenusBt4 #main-menu li { width: 100%; } #header .menu_wrap #smartMenusBt4 #main-menu li a { padding: 15px; display: inline-block; color: #070707; } #header .menu_wrap #smartMenusBt4 #main-menu li a .sub-arrow { border: 0px; transform: translateY(50%); right: 0px; vertical-align: middle; display: inline-block; transition: all 0.3s; border-radius: 0; } } @media (max-width: 767px) and (max-width: 767px) { #header .menu_wrap #smartMenusBt4 #main-menu li a .sub-arrow { transform: none; } } @media (max-width: 767px) { #header .menu_wrap #smartMenusBt4 #main-menu li a .sub-arrow::before { content: "\F078" !important; font-family: "Font Awesome 5 free"; font-weight: 900; height: 34px; display: inline-block; vertical-align: middle; color: #1C5EA2; display: flex; align-items: center; justify-content: center; } } @media (max-width: 767px) { #header .menu_wrap #smartMenusBt4 #main-menu li a .sub-arrow .menu_icon_arrow i { display: none; } } @media (max-width: 767px) { #header .menu_wrap #smartMenusBt4 #main-menu li a.highlighted { color: #174272; } #header .menu_wrap #smartMenusBt4 #main-menu li a.highlighted .sub-arrow::before { content: "\F077" !important; } } @media (max-width: 767px) { #header .menu_wrap #smartMenusBt4 #main-menu li ul { border: 0px; position: static; border-radius: 0px !important; box-shadow: none; padding-left: 0px; padding-right: 0px; background-color: transparent; border: none; padding-left: 15px; } #header .menu_wrap #smartMenusBt4 #main-menu li ul::before, #header .menu_wrap #smartMenusBt4 #main-menu li ul::after { display: none; } #header .menu_wrap #smartMenusBt4 #main-menu li ul li { border-bottom: 0px; border: none; } #header .menu_wrap #smartMenusBt4 #main-menu li ul li:last-child { border-bottom: 0px; } #header .menu_wrap #smartMenusBt4 #main-menu li ul li a { font-size: 1rem; color: #4D4D4D; width: 100%; border-left: none !important; border-bottom: 1px solid #AAAAAA; border: none; padding: 15px; } #header .menu_wrap #smartMenusBt4 #main-menu li ul li a.highlighted, #header .menu_wrap #smartMenusBt4 #main-menu li ul li a:hover { color: #174272; } #header .menu_wrap #smartMenusBt4 #main-menu li ul li a.highlighted .sub-arrow::before, #header .menu_wrap #smartMenusBt4 #main-menu li ul li a:hover .sub-arrow::before { color: #174272; } } @media (max-width: 767px) { #header .menu_wrap #smartMenusBt4 #main-menu li > ul { border-radius: 0px !important; } } @media (max-width: 767px) { #header .menu_wrap #smartMenusBt4 .navbar-collapse { top: 70px; top: 0; } #header .menu_wrap #smartMenusBt4 .navbar-collapse.show { left: 0px !important; } #header .menu_wrap #smartMenusBt4 .navbar-collapse.show .collapseBox #closeBtn { right: 10px; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .collapseBox { background-color: #F3F8FD; background-image: url("/images/project/176/mobile_bg.png"); background-size: contain; background-position: top right; background-repeat: no-repeat; padding: 0; position: relative; overflow-x: hidden; margin-top: 0px; padding: 20px 15px 80px; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .collapseBox .mobile_logo { display: flex; align-items: center; margin-bottom: 30px; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .collapseBox .mobile_logo a .logo_img { padding-right: 30px; max-height: 55px; max-width: 120px; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .collapseBox #closeBtn { position: fixed; right: -50px; top: 10px; margin: 0; width: 50px; height: 50px; background-color: #AFD6F3; z-index: 999999; border-radius: 50%; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .collapseBox #closeBtn .icon-bar { width: 25px; background-color: #174272; margin-left: 13px; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .collapseBox #closeBtn .icon-bar:nth-child(1) { transform: translateY(25px) rotate(-45deg); } #header .menu_wrap #smartMenusBt4 .navbar-collapse .collapseBox #closeBtn .icon-bar:nth-child(2) { transform: translateY(23px) rotate(45deg); } #header .menu_wrap #smartMenusBt4 .navbar-collapse .collapseBox #inquiry_shopping_member { position: relative; padding: 15px 0; display: flex; align-items: center; justify-content: center; display: none; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .collapseBox #inquiry_shopping_member .row { display: flex; flex-wrap: nowrap; justify-content: center; width: 100%; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .collapseBox #inquiry_shopping_member #cart_area { padding: 15px; color: #333333; font-size: clamp(16px, 0.833vw, 16px); text-transform: uppercase; background-color: transparent; display: flex; align-items: center; justify-content: center; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .collapseBox #inquiry_shopping_member #cart_area.inquiryBox { display: none; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .collapseBox #inquiry_shopping_member .memberBox { padding: 15px; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #e4e4e4; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .collapseBox #inquiry_shopping_member .languageBox { padding: 15px; display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #009945; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .collapseBox #inquiry_shopping_member .languageBox #language_icondropdown .dropdown > a { display: flex; align-items: center; justify-content: center; flex-direction: column; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .collapseBox #inquiry_shopping_member .languageBox #language_icondropdown .dropdown > a .funch_txt { color: #ffffff; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .collapseBox #inquiry_shopping_member .languageBox #language_icondropdown .dropdown-menu { border: none; border-radius: 0; padding: 0; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .collapseBox #inquiry_shopping_member .languageBox #language_icondropdown .dropdown-menu::before { display: none; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .collapseBox #inquiry_shopping_member .languageBox #language_icondropdown .dropdown-menu li { display: flex; align-items: center; justify-content: center; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .collapseBox #inquiry_shopping_member .languageBox #language_icondropdown .dropdown-menu li a { padding: 10px; text-align: center; color: #333333; width: 100%; transition: all 0.3s; font-size: clamp(12px, 0.729vw, 14px); } #header .menu_wrap #smartMenusBt4 .navbar-collapse .collapseBox #inquiry_shopping_member .languageBox #language_icondropdown .dropdown-menu li a:hover { color: #ffffff; background-color: #2a4293; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .SearchTop { display: flex; align-items: center; justify-content: center; margin-bottom: 20px; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList { padding: 0; position: relative; padding: 10px 15px 15px; display: flex; align-items: center; justify-content: center; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList.underBox { border-top: 1px solid #1C5EA2; padding: 20px 15px; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #language_icondropdown { margin: 0 7.5px; padding: 0; display: flex; align-items: center; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #language_icondropdown > .dropdown > a { color: #174272; font-size: clamp(16px, 0.833vw, 16px); position: relative; display: flex; align-items: center; justify-content: center; width: max(2.083vw, 25px); height: max(2.083vw, 25px); width: 35px; height: 35px; transition: all 0.3s; position: relative; background-color: #AFD6F3; margin-left: 0.78125vw; border-radius: 50%; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #language_icondropdown > .dropdown > a .img { display: flex; align-items: center; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #language_icondropdown > .dropdown > a .arrow { display: flex; align-items: center; margin-left: 5px; transform: translateY(2px); } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #language_icondropdown > .dropdown > a .icon { margin-left: 5px; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #language_icondropdown > .dropdown .dropdown-menu { background-color: #ffffff; border: none; box-shadow: none; border: 1px solid #55B1E7; padding: 0px; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #language_icondropdown > .dropdown .dropdown-menu::before, #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #language_icondropdown > .dropdown .dropdown-menu::after { display: none; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #language_icondropdown > .dropdown .dropdown-menu li a { font-size: clamp(16px, 0.833vw, 16px); color: #01429D; transition: all 0.3s; padding: 10px; display: block; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #language_icondropdown > .dropdown .dropdown-menu li a::before { display: none !important; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #language_icondropdown > .dropdown .dropdown-menu li a::after { display: none; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #language_icondropdown > .dropdown .dropdown-menu li a:hover { background-color: #00429D; color: #ffffff; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #cart_area { color: #174272; font-size: clamp(16px, 0.833vw, 16px); position: relative; display: flex; align-items: center; justify-content: center; width: max(2.083vw, 25px); height: max(2.083vw, 25px); width: 35px; height: 35px; transition: all 0.3s; position: relative; background-color: #AFD6F3; margin-left: 0.78125vw; margin: 0 7.5px; border-radius: 50%; display: none !important; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #cart_area:hover::before { left: 100%; opacity: 1; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #cart_area .badge-danger { padding: 0; font-size: 16px; font-size: clamp(16px, 0.833vw, 16px); font-size: 12px; color: #ffffff; position: initial; background-color: #174272; display: flex; align-items: center; justify-content: center; font-weight: 400; padding: 0; width: 15px; height: 15px; border-radius: 50%; position: absolute; bottom: 0; right: 0; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #search_block { margin: 0 7.5px; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #search_block a { color: #174272; display: flex; align-items: center; justify-content: center; width: max(2.083vw, 25px); height: max(2.083vw, 25px); width: 35px; height: 35px; font-size: clamp(16px, 0.833vw, 16px); transition: all 0.3s; position: relative; background-color: #AFD6F3; border-radius: 50%; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #search_area { padding: 0; border-bottom: none; border-bottom: 1px solid #174272; margin-bottom: 30px; width: 100%; padding: 5px 0; margin-bottom: 20px; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #search_area ul { padding: 0; margin: 0; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #search_area ul .input-group { flex-direction: row-reverse; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #search_area ul .input-group .input-group-append { background: transparent; padding: 0; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #search_area ul .input-group .input-group-append .btn { padding: 0; background: transparent; padding-right: 10px; margin-right: 10px; border: none; font-size: 24px; font-size: clamp(16px, 1.25vw, 24px); font-size: 16px; display: flex; align-items: center; justify-content: center; color: #000000; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #search_area ul .input-group .form-control { background: transparent; color: #4D4D4D; height: auto; padding: 0; border-radius: 0; border: none; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #search_area ul .input-group .form-control::-moz-placeholder { color: #767676; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #search_area ul .input-group .form-control:-ms-input-placeholder { color: #767676; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #search_area ul .input-group .form-control::placeholder { color: #767676; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #language_textlist { max-width: none; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #language_textlist > div { display: flex; align-items: center; justify-content: flex-end; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #language_textlist span.separate_line { color: #00429D; color: #2C2C2C; margin: 0 15px; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #language_textlist a { color: #4D4D4D; font-size: clamp(12px, 0.833vw, 16px); transition: all 0.3s; padding: 5px 15px; border-radius: 30px; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #language_textlist a:hover { color: #174272; } #header .menu_wrap #smartMenusBt4 .navbar-collapse .FooterlangList #language_textlist a.active { color: #174272; font-weight: 600; background-color: #AFD6F3; } } @media (max-width: 767px) { .bannerBox.no_banner { margin-top: 68px; } } #banner #banner_block .splide__slide video { width: 100%; } #banner .banner-image { width: 100%; height: auto; } #banner .splide__slide { outline: none; } #banner .splide__pagination__page { margin-left: 10px; margin-left: 10px; } #banner .splide__pagination__page:hover { background: #999; } #banner .splide__pagination__page.is-active { background: #333; } #banner .banner_summary { background: linear-gradient(to right, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0.025)); padding: 20px 35px; padding-right: 70px; position: absolute; bottom: 0; color: #fff; font-size: 18px; } #banner .banner_summary p { margin-bottom: 0; } @media (max-width: 767px) { #banner .banner_summary { position: static; } } #language_textlist { max-width: 60%; text-align: justify; } #language_textlist span.separate_line { color: #D4D4D4; margin-right: 10px; margin-left: 10px; } #language_textlist > div > span:nth-child(1) .separate_line { display: none; } #language_icondropdown .fa-globe { font-size: 1.3em !important; margin-right: 7px; } #language_icondropdown .dropdown-menu.show { transform: translate3d(-50%, 25px, 0px) !important; top: 10px !important; left: 50% !important; text-align: center; z-index: 10000; } #language_icondropdown .dropdown-menu.show::before { border-color: transparent; border-bottom-color: #FAF0EF; border-style: solid; border-top: 0; border-width: 8px; content: ""; display: block; position: absolute; top: -10px; left: 45%; } #language_icondropdown .dropdown a:hover { color: #f68980; } #language_icondropdown .dropdown > a { display: flex; align-items: center; } #language_icondropdown .dropdown .dropdown_flag { width: 20px; margin-right: 5px; } /* 不顯示文字 */ #language_icondropdown.only_icon { display: flex; align-items: center; } #language_icondropdown.only_icon .fa-globe { font-size: 1.5em !important; margin: 0; } #language_icondropdown.only_icon .dropdown-menu.show { top: 15px !important; left: -70px !important; transform: translate3d(0px, 25px, 0px) !important; } #language_icondropdown.only_icon #lang_text { display: none; } /* 只顯示文字 */ #language_icondropdown.only_text .dropdown i, #language_icondropdown.only_text .dropdown img { display: none; } #menu_bottom > ul { padding: 0; margin: 0; list-style: none; } #menu_bottom > ul li { vertical-align: middle; display: inline-block; margin: 0; } #menu_bottom > ul li + li::before { vertical-align: middle; display: inline-block; content: "/"; margin: 0 15px; color: #fff; } #copyright { text-align: right; } #siblings-link { margin-top: 1.5em; margin-bottom: 1.5em; } #siblings-link #siblings-link-wrap { display: flex; justify-content: flex-end; } #siblings-link #siblings-link-wrap .link { text-align: center; margin-left: 0.5em; } #siblings-link #siblings-link-wrap .link a { font-size: 0.875em; border-radius: 10px; border-color: #999; } #siblings-link #siblings-link-wrap .link a:hover { background-color: #333; color: #FFF; } #siblings-link #siblings-link-wrap .link i { margin-right: 0.5em; } #siblings-link #siblings-link-wrap .link:last-child i { margin-left: 0.5em; } /* 熱門商品追蹤愛心 */ .hot_product { position: absolute; font-size: 25px; margin-top: -30px; right: 10px; background-color: transparent; border: 0; line-height: 1; } .hot_product:focus { outline: none; } .follow { color: gray; } .follow:hover { color: red; transition: color 0.4s; } .followed { color: red; } .product_follow { text-align: right; } .product_follow .hot_top_product { position: absolute; font-size: 32px; margin: -50px 0px 0px -60px; background-color: transparent; border: 0; line-height: 1; } .product_follow .hot_top_product:focus { outline: none; } /* 產品列表追蹤愛心樣式 */ .product_item_heart { position: absolute; font-size: 30px; margin: -35px 0px 0px 50px; background-color: transparent; border: 0; line-height: 1; } .product_item_heart:focus { outline: none; } @media (max-width: 767px) and (min-width: 541px) { /** 熱門商品追蹤愛心 **/ .hot_product { position: absolute; font-size: 25px; margin-top: -40px; right: 20%; background-color: transparent; border: 0; line-height: 1; } .hot_product:focus { outline: none; } } @media (max-width: 540px) { /** 熱門商品追蹤愛心 **/ .hot_product { position: absolute; font-size: 25px; margin-top: -35px; right: 15%; background-color: transparent; border: 0; line-height: 1; } .hot_product:focus { outline: none; } } @media (max-width: 540px) and (min-width: 415px) { /* 產品列表追蹤愛心樣式 */ .product_item_heart { position: absolute; font-size: 30px; margin-top: -80px; right: 20%; background-color: transparent; border: 0; line-height: 1; } .product_item_heart:focus { outline: none; } } #product-filter { margin-bottom: 1em; } #product-filter .navbar { padding: 1em; } #product-filter .navbar #navbar-response-collapse button.nav-item { border-color: #CCC; border-radius: 0; outline: none; color: #000; } #product-filter .navbar #navbar-response-collapse button.nav-item:hover, #product-filter .navbar #navbar-response-collapse button.nav-item.active { background-color: #333; color: #FFF; } #product-filter .navbar #navbar-response-collapse button.nav-item + button.nav-item { margin-left: 1em; } @media (max-width: 1199px) { #product-filter .navbar #navbar-response-collapse button.nav-item + button.nav-item { margin-left: 0; } } @media (max-width: 1199px) { #product-filter .navbar #navbar-response-collapse button.nav-item { text-align: left; margin-top: 1em; padding: 0.5em 1em; } } #product-filter .navbar #navbar-response-collapse #product-filter-range-form { margin-left: 1em; } @media (max-width: 1199px) { #product-filter .navbar #navbar-response-collapse #product-filter-range-form { margin-left: 0; margin-top: 1em; } } #product-filter .navbar #navbar-response-collapse #product-filter-range-form input, #product-filter .navbar #navbar-response-collapse #product-filter-range-form button { border-radius: 0; } /* 銷售排行榜 */ .sales_rank_title { padding-bottom: 1.5em; } .sales_rank_list { padding: 0; margin: 0; list-style-type: none; } .sales_rank_list > li { padding: 0 0 2em 0; } .sales_rank_list > li .sales_rank_link { text-decoration: none; cursor: pointer; } .sales_rank_list > li .sales_rank_link:hover { color: #ec651f; } .sales_rank_list > li .sales_rank_link:hover .sales_rank_item .sales_rank_info .sales_rank_name, .sales_rank_list > li .sales_rank_link:hover .sales_rank_item .sales_rank_info .sales_rank_summary { color: #ec651f; } .sales_rank_list > li .sales_rank_link:hover .sales_rank_item .sales_rank_image div img { transform: scale(1.1); } .sales_rank_list > li .sales_rank_link .sales_rank_item { padding: 0 0 0em 0.7em; margin: 0; width: 100%; } .sales_rank_list > li .sales_rank_link .sales_rank_item .sales_rank_info { width: 60%; display: inline-block; } .sales_rank_list > li .sales_rank_link .sales_rank_item .sales_rank_info .sales_rank_index { font-family: Arial, Helvetica, sans-serif; font-size: 1.75em; font-style: italic; font-weight: 900; color: #ec651f; letter-spacing: 0.15em; } .sales_rank_list > li .sales_rank_link .sales_rank_item .sales_rank_info .sales_rank_name { font-size: 1.1em; font-weight: 700; color: black; padding: 0.5em 0.2em 0em 0.4em; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .sales_rank_list > li .sales_rank_link .sales_rank_item .sales_rank_info .sales_rank_summary { font-size: 1em; color: black; padding: 0.5em 0.2em 0em 0.4em; } .sales_rank_list > li .sales_rank_link .sales_rank_item .sales_rank_image { width: 40%; vertical-align: top; display: inline-block; } .sales_rank_list > li .sales_rank_link .sales_rank_item .sales_rank_image > div { border: 2px #F5F5F5 solid; padding: 1px; overflow: hidden; } .sales_rank_list > li .sales_rank_link .sales_rank_item .sales_rank_image > div img { transition: all 0.3s; } #siblings-link { margin-top: 1.5em; margin-bottom: 1.5em; } #siblings-link #siblings-link-wrap { display: flex; justify-content: flex-end; } #siblings-link #siblings-link-wrap .link { text-align: center; margin-left: 0.5em; } #siblings-link #siblings-link-wrap .link a { font-size: 0.875em; border-radius: 10px; border-color: #999; } #siblings-link #siblings-link-wrap .link a:hover { background-color: #333; color: #FFF; } #siblings-link #siblings-link-wrap .link i { margin-right: 0.5em; } #siblings-link #siblings-link-wrap .link:last-child i { margin-left: 0.5em; } @media (max-width: 767px) { #branch-business #branch-aside-toggle { display: none; } } #branch-business #branch-list { position: relative; height: 500px; border: 1px solid #EEE; } @media (max-width: 767px) { #branch-business #branch-list { height: auto; } } #branch-business #branch-list.grid { height: auto; } #branch-business #branch-list #branch-items { width: 40%; overflow-y: scroll; } #branch-business #branch-list #branch-items.aside-hide { width: 30%; } @media (max-width: 991px) { #branch-business #branch-list #branch-items.aside-hide { width: 50%; } } @media (max-width: 767px) { #branch-business #branch-list #branch-items.aside-hide { width: 100%; } } @media (max-width: 991px) { #branch-business #branch-list #branch-items { width: 50%; } } @media (max-width: 767px) { #branch-business #branch-list #branch-items { width: 100%; min-height: 100px; max-height: 300px; } } #branch-business #branch-list #branch-items.grid { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; width: 100%; padding: 15px 15px 0 15px; overflow: visible !important; } @media (max-width: 767px) { #branch-business #branch-list #branch-items.grid { min-height: 100px; max-height: none; } } #branch-business #branch-list #branch-items.grid .branch-info { position: relative; display: flex; flex-wrap: nowrap; flex-direction: column-reverse !important; justify-content: flex-end !important; padding: 15px; border: 1px solid #DDD; margin: 0 7.5px 15px 7.5px; } @media (min-width: 992px) { #branch-business #branch-list #branch-items.grid .branch-info { width: calc(33.3333333333% - 10px); } #branch-business #branch-list #branch-items.grid .branch-info:nth-child(3n+1) { margin-left: 0; } #branch-business #branch-list #branch-items.grid .branch-info:nth-child(3n+3) { margin-right: 0; } } @media (max-width: 991px) { #branch-business #branch-list #branch-items.grid .branch-info { width: calc(50% - 7.5px); } #branch-business #branch-list #branch-items.grid .branch-info:nth-child(2n+1) { margin-left: 0; } #branch-business #branch-list #branch-items.grid .branch-info:nth-child(2n+2) { margin-right: 0; } } @media (max-width: 767px) { #branch-business #branch-list #branch-items.grid .branch-info { width: 100%; margin-right: 0; margin-left: 0; } } #branch-business #branch-list #branch-items.grid .branch-info .image-line { content: ""; position: absolute; left: 50%; transform: translateX(-50%); z-index: -1; display: block; top: 172.5px; height: 1px; width: 100%; background-color: #DDD; } #branch-business #branch-list #branch-items.grid .branch-info .branch-info-image { width: 100%; height: 150px; text-align: center; margin-bottom: 15px; } #branch-business #branch-list #branch-items.grid .branch-info .branch-info-image img { display: inline-block; max-width: 100%; max-height: 100%; } #branch-business #branch-list #branch-items.grid dt { font-weight: bold; margin-bottom: 0.5em; } #branch-business #branch-list #branch-items.grid dd .marker-icon { display: inline-block; text-align: center; width: 20px; margin-right: 0.5em; vertical-align: top; } #branch-business #branch-list #branch-items.grid dd .marker-icon + span { width: calc(100% - (20px + 0.5em)); display: inline-block; word-wrap: break-word; } #branch-business #branch-list #branch-items.grid dd.open-at ul { list-style: none; padding-left: 0; margin-bottom: 0; } #branch-business #branch-list #branch-items .branch-item { padding: 0.5em; border-width: 1px; border-style: none none solid none; border-color: #DDD; cursor: pointer; } #branch-business #branch-list #branch-items .branch-item:nth-child(even) { background-color: #EEE; } #branch-business #branch-list #branch-items .branch-item dl { margin: 0; } #branch-business #branch-list #branch-items .branch-item dl dt { font-size: 15px; font-weight: bold; color: #555; margin-bottom: 1em; } #branch-business #branch-list #branch-items .branch-item dl dd { font-size: 14px; font-weight: normal; color: gray; margin-bottom: 0.5em; } #branch-business #branch-list #branch-map { width: 60%; height: 100%; } #branch-business #branch-list #branch-map.aside-hide { width: 70%; } @media (max-width: 991px) { #branch-business #branch-list #branch-map.aside-hide { width: 50%; } } @media (max-width: 767px) { #branch-business #branch-list #branch-map.aside-hide { width: 100%; } } @media (max-width: 991px) { #branch-business #branch-list #branch-map { width: 50%; } } @media (max-width: 767px) { #branch-business #branch-list #branch-map { width: 100%; height: 300px; } } #branch-business #branch-list #branch-map #google-map-wrapper .google-map-marker .branch-info { display: flex; flex-wrap: nowrap; } #branch-business #branch-list #branch-map #google-map-wrapper .google-map-marker .branch-info dl dt { font-size: 1.5em; font-weight: 600; margin-bottom: 0.5em; } #branch-business #branch-list #branch-map #google-map-wrapper .google-map-marker .branch-info dl dd { display: flex; flex-wrap: nowrap; } #branch-business #branch-list #branch-map #google-map-wrapper .google-map-marker .branch-info dl dd + dd { margin-top: 0.5em; } #branch-business #branch-list #branch-map #google-map-wrapper .google-map-marker .branch-info dl dd .marker-icon { display: inline-block; text-align: center; width: 15px; margin-right: 0.5em; } #branch-business #branch-list #branch-map #google-map-wrapper .google-map-marker .branch-info dl dd.open-at ul { list-style: none; padding-left: 0; margin-bottom: 0; margin-top: -0.25em; } #branch-business #branch-list #branch-map #google-map-wrapper .google-map-marker .branch-info dl dd span + span { word-wrap: break-word; margin-top: -0.15em; } #branch-business #branch-list #branch-map #google-map-wrapper .google-map-marker .branch-info-image { margin-left: 20px; } #branch-business #branch-paginate { margin-top: 20px; } #branch-business #branch-filter { position: relative; padding: 15px; margin-bottom: 1em; border: 1px solid #EEE; } #branch-business #branch-filter #branch-filter-toggle { display: flex; justify-content: flex-end; align-items: center; } #branch-business #branch-filter #branch-filter-toggle.has-expanded { display: block; position: absolute; right: 10px; top: 10px; z-index: 2; } #branch-business #branch-filter #branch-filter-toggle.has-expanded span { display: none; } #branch-business #branch-filter #branch-filter-toggle span { margin-right: 1em; } #branch-business #branch-filter #branch-attributes dl dt { width: 8em; margin-right: 1em; } @media (max-width: 767px) { #branch-business #branch-filter #branch-attributes dl dt { width: auto; margin-right: 0; } } #branch-business #branch-filter #branch-attributes dl dd { margin-bottom: 0; } #branch-business #branch-filter #branch-attributes dl dd + dd { margin-left: 1em; } @media (max-width: 767px) { #branch-business #branch-filter #branch-attributes dl dd + dd { margin-left: 0; } } #branch-business #branch-filter dl#branch-location-filter dt { width: 8em; margin-right: 1em; } @media (max-width: 767px) { #branch-business #branch-filter dl#branch-location-filter dt { width: auto; margin-right: 0; } } #branch-business #branch-filter dl#branch-location-filter dd { margin-bottom: 0; } #branch-business #branch-filter dl#branch-location-filter dd + dd { margin-left: 1em; } @media (max-width: 767px) { #branch-business #branch-filter dl#branch-location-filter dd + dd { margin-left: 0; margin-top: 0.5em; } } .label-show-wrapper { margin-bottom: 1em; } .label-show-wrapper dl { margin-bottom: 0; } .label-show-wrapper dl > * { margin-bottom: 0; } .label-show-wrapper dl dt { font-weight: normal; margin-bottom: 0.25em; } .label-show-wrapper dl dd { position: relative; display: inline-block; } .label-show-wrapper dl dd::before { content: ""; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; width: calc(100% - 0.25em); height: calc(100% - 0.25em); background-color: rgba(0, 0, 0, 0.1); z-index: 1; } .label-show-wrapper dl dd a { display: block; position: relative; padding: 0.5em; color: #666; z-index: 2; } .label-show-wrapper dl dd a:hover { color: #333; } /* -------------------------------- winho Web Font Generated using nucleoapp.com -------------------------------- */ @font-face { font-family: "winho"; src: url(/dist/fonts/winho.eot?3f09d3c2e1e732cbd0ccb212aa3ab2d2); src: url(/dist/fonts/winho.eot?3f09d3c2e1e732cbd0ccb212aa3ab2d2) format("embedded-opentype"), url(/dist/fonts/winho.woff2?94e71e04822ab7270c813c087d68b41f) format("woff2"), url(/dist/fonts/winho.woff?5faf53c20cac732f48eef6f8f9220c08) format("woff"), url(/dist/fonts/winho.ttf?87275962aa11fc29150ecf4a4f047cf2) format("truetype"), url(/dist/fonts/winho.svg?091349a196cb9d7de7407b3d254dcd5e) format("svg"); font-weight: normal; font-style: normal; } /*------------------------ base class definition -------------------------*/ .wb { display: inline-block; font: normal normal normal 1em/1 "winho"; color: inherit; flex-shrink: 0; speak: none; text-transform: none; /* Better Font Rendering */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /*------------------------ change icon size -------------------------*/ /* relative units */ .wb-sm { font-size: 0.8em; } .wb-lg { font-size: 1.2em; } /* absolute units */ .wb-16 { font-size: 16px; } .wb-32 { font-size: 32px; } /*------------------------ spinning icons -------------------------*/ .wb-is-spinning { -webkit-animation: wb-spin 1s infinite linear; animation: wb-spin 1s infinite linear; } @-webkit-keyframes wb-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes wb-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /*------------------------ rotated/flipped icons -------------------------*/ .wb-rotate-90 { transform: rotate(90deg); } .wb-rotate-180 { transform: rotate(180deg); } .wb-rotate-270 { transform: rotate(270deg); } .wb-flip-y { transform: scaleY(-1); } .wb-flip-x { transform: scaleX(-1); } /*------------------------ icons -------------------------*/ .w-ban::before { content: "\EA01"; } .w-box-open::before { content: "\EA02"; } .w-cart-plus::before { content: "\EA03"; } .w-clipboard-list::before { content: "\EA04"; } .w-envelope::before { content: "\EA05"; } .w-fax::before { content: "\EA06"; } .w-globe::before { content: "\EA07"; } .w-heart::before { content: "\EA08"; } .w-home::before { content: "\EA09"; } .w-map-market-alt::before { content: "\EA0A"; } .w-paper-plane::before { content: "\EA0B"; } .w-phone::before { content: "\EA0C"; } .w-search::before { content: "\EA0D"; } .w-shopping-cart::before { content: "\EA0E"; } .w-user::before { content: "\EA0F"; } @media (min-width: 992px) and (max-width: 1560px) { .gutter-col-11 { flex: 0 0 91.33333333%; max-width: 91.33333333%; } } @media (max-width: 991px) { .gutter991 { flex: 0 0 100% !important; max-width: 100% !important; padding-left: 30px !important; padding-right: 30px !important; } } @media (max-width: 480px) { .gutter991 { padding-left: 20px !important; padding-right: 20px !important; } } @media (max-width: 450px) { .col-6 { flex: 0 0 100%; max-width: 100%; } } @font-face { font-family: "Lato"; font-style: "normal"; font-display: swap; font-weight: 400; src: url(/dist/fonts/Lato-Regular.woff2?129179c4eeb1d784d3d3ad95e0b35905) format("woff2"); } @font-face { font-family: "Abel"; font-style: "normal"; font-display: swap; font-weight: 400; src: url(/dist/fonts/Abel-Regular.woff2?8a3120a94e363ce8867bee0f08d89510) format("woff2"); } @font-face { font-family: "Bitter"; font-style: "normal"; font-display: swap; font-weight: 400; src: url(/dist/fonts/Bitter-Bold.woff2?3d6fd7c8fbfbcde04e2f8c4cd22168ab) format("woff2"); } @font-face { font-family: "Urbanist-ExtraBold"; font-style: "normal"; font-display: swap; font-weight: 400; src: url(/dist/fonts/Urbanist-ExtraBold.woff2?a991b8ebeccf9c70a436aef169f11d94) format("woff2"); } @font-face { font-family: "Urbanist-Bold"; font-style: "normal"; font-display: swap; font-weight: 400; src: url(/dist/fonts/Urbanist-Bold.woff2?4a23da6f9b34a48dcbc1bf96e8cbfc52) format("woff2"); } @font-face { font-family: "Urbanist-SemiBold"; font-style: "normal"; font-display: swap; font-weight: 400; src: url(/dist/fonts/Urbanist-SemiBold.woff2?d1c7eebf29219d9cb74ad4c33f4b9be5) format("woff2"); } @font-face { font-family: "Outfit-Bold"; font-style: "normal"; font-display: swap; font-weight: 400; src: url(/dist/fonts/Outfit-Bold.woff?4f148a9639de747ee44e32240e004de8) format("woff"); } @font-face { font-family: "Outfit-Regular"; font-style: "normal"; font-display: swap; font-weight: 400; src: url(/dist/fonts/Outfit-Regular.woff?d437406bf7ec6cb115e0cc42bb8fca6d) format("woff"); } body { font-family: "DM Sans", Arial, Microsoft JhengHei, Helvetica, sans-serif; color: #222222; background-color: #F3F8FD; overflow-x: hidden; font-size: clamp(16px, 1.5vw, 18px); } html { scroll-behavior: smooth; overflow-x: hidden; } p { margin-bottom: 0; } a:hover { text-decoration: none; } a:focus-visible { outline: none; } #btn_more { background: transparent; border: 1px solid #AFD6F3 !important; background-color: #AFD6F3; padding: 7px 25px 7px 25px; transition: all 0.3s; color: #174272; transition: all 0.3s; display: flex; align-items: center; justify-content: center; border-radius: 30px !important; font-size: clamp(16px, 0.833vw, 16px); font-size: clamp(16px, 1.5vw, 18px); } #btn_more .wb { margin-right: 7px; } #btn_more:hover { background-color: #174272 !important; border: 1px solid #174272 !important; color: #AFD6F3 !important; text-shadow: none; } #btn_back { background: #AFD6F3; border: 1px solid #AFD6F3 !important; padding: 7px 25px 7px 25px; transition: all 0.3s; color: #174272; transition: all 0.3s; display: flex; align-items: center; justify-content: center; border-radius: 30px !important; font-size: clamp(16px, 0.833vw, 16px); font-size: clamp(16px, 1.5vw, 18px); } #btn_back .wb { margin-right: 7px; } #btn_back:hover { background-color: #174272 !important; border: 1px solid #174272 !important; color: #AFD6F3 !important; text-shadow: none; } .add-to-cart { background: #AFD6F3; border: 1px solid #AFD6F3 !important; padding: 15px 25px 15px 25px; transition: all 0.3s; color: #174272; transition: all 0.3s; display: flex; align-items: center; justify-content: center; border-radius: 30px !important; display: flex; align-items: center; justify-content: center; font-size: clamp(16px, 0.833vw, 16px); } .add-to-cart .wb { margin-right: 7px; font-size: 20px; } .add-to-cart:hover { background-color: #174272 !important; border: 1px solid #174272 !important; color: #AFD6F3 !important; text-shadow: none; } @-webkit-keyframes leftIn { 0% { transform: translate3d(-30%, 0, 0); opacity: 0; } 100% { transform: none; opacity: 1; } } @keyframes leftIn { 0% { transform: translate3d(-30%, 0, 0); opacity: 0; } 100% { transform: none; opacity: 1; } } @-webkit-keyframes scrolling { 0% { transform: translateX(0); } 100% { transform: translatex(-100%); } } @keyframes scrolling { 0% { transform: translateX(0); } 100% { transform: translatex(-100%); } } @-webkit-keyframes gradientShift { 0% { background-position: 0% 0%; } 100% { background-position: 0% 100%; } } @keyframes gradientShift { 0% { background-position: 0% 0%; } 100% { background-position: 0% 100%; } } @-webkit-keyframes BannerBgTxtBox { 0% { opacity: 0; top: 20%; } 100% { opacity: 1; top: 5%; } } @keyframes BannerBgTxtBox { 0% { opacity: 0; top: 20%; } 100% { opacity: 1; top: 5%; } } @-webkit-keyframes BannerTxtBox { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes BannerTxtBox { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 30px, 0); } 100% { opacity: 1; transform: translateZ(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translate3d(0, 30px, 0); } 100% { opacity: 1; transform: translateZ(0); } } @-webkit-keyframes arrowMove { 0% { transform: translateY(-6px) rotate(90deg); opacity: 1; } 60% { transform: translateY(8px) rotate(90deg); opacity: 0; } 100% { transform: translateY(-6px) rotate(90deg); opacity: 0; } } @keyframes arrowMove { 0% { transform: translateY(-6px) rotate(90deg); opacity: 1; } 60% { transform: translateY(8px) rotate(90deg); opacity: 0; } 100% { transform: translateY(-6px) rotate(90deg); opacity: 0; } } @-webkit-keyframes borderPulse { 0% { box-shadow: 0 0 4px rgba(255, 255, 255, 0.4); transform: translate(-50%, 0); } 50% { box-shadow: 0 0 8px rgba(255, 255, 255, 0.8); transform: translate(-50%, 4px); } 100% { box-shadow: 0 0 4px rgba(255, 255, 255, 0.4); transform: translate(-50%, 0); } } @keyframes borderPulse { 0% { box-shadow: 0 0 4px rgba(255, 255, 255, 0.4); transform: translate(-50%, 0); } 50% { box-shadow: 0 0 8px rgba(255, 255, 255, 0.8); transform: translate(-50%, 4px); } 100% { box-shadow: 0 0 4px rgba(255, 255, 255, 0.4); transform: translate(-50%, 0); } } @-webkit-keyframes textNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } } @keyframes textNudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2px); } } #list_grid .grid_content { width: 100%; position: relative; text-align: center; background: #fff; height: 100%; } #list_grid .grid_content .img-fluid { width: 100%; } #list_grid .grid_content.grid-content-bottom { padding-bottom: 120px; } #list_grid .grid_content .grid_content_info { padding: 20px 0 0 0; text-align: left; } #list_grid .grid_content .grid_content_info .grid_title { color: #000; font-weight: bold; transition: 0.2s; text-align: center; } #list_grid .grid_content .grid_content_info .grid_title:hover { color: #f68980; } #list_grid .grid_content .grid_content_info .grid_summary, #list_grid .grid_content .grid_content_info .grid_publictime { color: #9c9c9c; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 30px; } #list_grid .grid_content .grid_content_info .grid-public { border-top: 1px solid #EEE; font-size: 0.625em; margin-top: 1em; margin-bottom: 1em; padding-top: 0.5em; color: #999; } #list_grid .grid_content .grid_content_bottom { position: absolute; left: 50%; transform: translateX(-50%); z-index: 1; bottom: 0; text-align: center; width: 100%; } #list_grid .grid_content .grid_content_bottom .spec_match_selector:focus { outline-style: none; box-shadow: none; } #list_grid .grid_content .grid_content_bottom .input-group-append button:focus { outline-style: none; box-shadow: none; } #list_grid .grid_price { margin-bottom: 15px; color: #000; } #list_grid h6 { margin-left: 50px; margin-top: 50px; margin-bottom: 50px; color: #5c5c5c; } #list_accordion .accordion_content { background: #fff; padding-top: 35px; padding-bottom: 100px; padding-left: 65px; padding-right: 65px; } #list_accordion .accordion_content > .container { padding: 0; margin-bottom: 25px; } #list_accordion .accordion_content .accordion_item { margin-bottom: 15px; } #list_accordion .accordion_content .accordion_item .accordion { cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; transition: 0.4s; background: #ffafa9; color: #fff; font-size: 1.5em; border-radius: 10px; } #list_accordion .accordion_content .accordion_item .accordion.active { border-radius: 10px 10px 0px 0px; } #list_accordion .accordion_content .accordion_item .accordion h2 { font-size: 1em; margin: 0; line-height: 1.5em; } #list_accordion .accordion_content .accordion_item .panel { padding: 0 18px; max-height: 0; overflow: hidden; transition: max-height 0.2s ease-out; background: #fff9f8; border-radius: 0px 0px 10px 10px; } #list_downloadstrip .downloadstrip_item { background: #fff; margin-bottom: 20px; } #list_downloadstrip .downloadstrip_item .img-fluid { width: 100%; } #list_downloadstrip .downloadstrip_item .item_content { padding-top: 20px; padding-bottom: 20px; } #list_downloadstrip .downloadstrip_item .item_content > div:nth-last-child(1) { margin-top: 20px; } #list_downloadstrip .downloadstrip_item .item_content a.download-btn { border-radius: 40px; color: #636363; transition: 0.2s; } #list_downloadstrip .downloadstrip_item .item_content a.download-btn:hover { color: #000; } #related_area .related_title, .related_area .related_title { padding-bottom: 20px; padding: 12px 20px; margin-bottom: 20px; font-size: 18px; color: #fff; background: #cdcdcd; } .related_area > .container { padding-left: 0px; padding-right: 0px; } #product-show-page .pd-summary { padding-bottom: max(4.792vw, 40px); border-bottom: 1px solid #afd6f3; } #product-show-page .pd-summary .info { font-family: "DM Sans", 微軟正黑體, "Microsoft JhengHei", PingFang, sans-serif; font-size: 16px; font-weight: normal; font-style: normal; letter-spacing: 0.16px; line-height: normal; text-transform: none; font-optical-sizing: auto; color: #4d4d4d; margin-bottom: max(3.125vw, 30px); } #product-show-page .pipeline-container #pipeline-table { width: 100%; border-top-left-radius: 10px; border-top-right-radius: 10px; text-align: center; font-family: "DM Sans", 微軟正黑體, "Microsoft JhengHei", PingFang, sans-serif; font-size: 16px; font-weight: normal; font-style: normal; letter-spacing: 0.16px; line-height: normal; text-transform: none; font-optical-sizing: auto; table-layout: fixed; border-collapse: collapse; overflow: hidden; } @media (max-width: 991px) { #product-show-page .pipeline-container #pipeline-table { display: none; } } #product-show-page .pipeline-container #pipeline-table img.logo { width: 100%; max-width: 90px; } #product-show-page .pipeline-container #pipeline-table th { font-weight: bold; color: #fff; background-color: #174272; padding: 8px 20px; border: 1px solid #fff; } #product-show-page .pipeline-container #pipeline-table tr:nth-child(odd) { background-color: #fff; } #product-show-page .pipeline-container #pipeline-table tr:nth-child(even) { background-color: #f3f8fd; } #product-show-page .pipeline-container #pipeline-table tr td:first-child { border-left: none; } #product-show-page .pipeline-container #pipeline-table tr td:last-child { border-right: none; } #product-show-page .pipeline-container #pipeline-table td { padding: max(1.354vw, 12px) 8px; border: 1px solid rgba(7, 7, 7, 0.2); } #product-show-page .pipeline-container #pipeline-table td.progress-block { padding: max(1.354vw, 12px) 0; } #product-show-page .pipeline-container #pipeline-table td p { margin: 0; padding: 0; } #product-show-page .pipeline-container #pipeline-table td .pd-name { font-weight: bold; } #product-show-page .pipeline-container #pipeline-table .ex-progress-bar { height: 30px; text-align: left; } #product-show-page .pipeline-container #pipeline-table .ex-progress-bar img { max-width: 100%; -o-object-fit: cover; object-fit: cover; height: 100%; } @media (max-width: 991px) { #product-show-page .pipeline-container .mobile-table-container { display: block; } } #product-show-page .pipeline-container .mobile-table-container .m-product-card { margin-bottom: 30px; } #product-show-page .pipeline-container .mobile-table-container .m-row { display: flex; } #product-show-page .pipeline-container .mobile-table-container .m-row:nth-child(even) { background-color: #fff; } #product-show-page .pipeline-container .mobile-table-container .m-row:nth-child(odd) { background-color: #ebf0f4; } #product-show-page .pipeline-container .mobile-table-container .m-row:first-child { background-color: #174272; color: #fff; } #product-show-page .pipeline-container .mobile-table-container .m-row:nth-child(6) .m-value { text-align: center; } #product-show-page .pipeline-container .mobile-table-container .m-row:nth-child(6) img { width: 100%; max-width: max(12vw, 100px); } #product-show-page .pipeline-container .mobile-table-container .m-row .m-label, #product-show-page .pipeline-container .mobile-table-container .m-row .m-value { padding: 8px 10px; word-break: break-word; } #product-show-page .pipeline-container .mobile-table-container .m-row .m-label { font-weight: bold; flex: 0 0 130px; border-right: 1px solid #fff; } #product-show-page .pipeline-container .mobile-table-container .m-row .m-value { flex: auto; } #product-show-page .pipeline-container .mobile-table-container .m-process-wrapper { max-width: -webkit-fit-content; max-width: -moz-fit-content; max-width: fit-content; } #product-show-page .pipeline-container .mobile-table-container .process-style { color: #fff; text-align: center; padding: 5px 10px; display: none; min-width: 120px; } #product-show-page .pipeline-container .mobile-table-container .process-style.is-active { display: flex; align-items: center; justify-content: center; } #product-show-page .pipeline-container .mobile-table-container .process-style.ps1 { background-color: #9e9e9e; } #product-show-page .pipeline-container .mobile-table-container .process-style.ps2 { background-color: #4c8ed5; } #product-show-page .pipeline-container .mobile-table-container .process-style.ps3 { background-color: #22568f; } #product-show-page .pipeline-container .mobile-table-container .process-style.ps4 { background-color: #183759; } #product-show-page .accordion-wrap { padding-top: max(4.792vw, 50px); cursor: pointer; width: 100%; padding-bottom: max(7.292vw, 70px); padding-bottom: 0; } #product-show-page .accordion-wrap .accordion-item { margin-bottom: 30px; } #product-show-page .accordion-wrap .accordion-title { display: flex; align-items: center; justify-content: space-between; font-family: "DM Sans", 微軟正黑體, "Microsoft JhengHei", PingFang, sans-serif; font-size: 16px; font-weight: normal; font-style: normal; letter-spacing: normal; line-height: normal; text-transform: none; font-optical-sizing: auto; padding: 20px 15px; background-color: #fff; color: #070707; transition: all 0.3s ease; border-top-left-radius: 10px; border-top-right-radius: 10px; } #product-show-page .accordion-wrap .accordion-title .accordion-icon { position: relative; display: inline-block; width: 19px; height: 19px; border-radius: 50%; background: transparent; } #product-show-page .accordion-wrap .accordion-title .accordion-icon:before, #product-show-page .accordion-wrap .accordion-title .accordion-icon:after { content: ""; position: absolute; display: inline-block; height: 12px; width: 1px; background-color: #070707; top: 50%; left: 50%; } #product-show-page .accordion-wrap .accordion-title .accordion-icon:before { transform: translate(-50%, -50%) rotate(0); } #product-show-page .accordion-wrap .accordion-title .accordion-icon:after { transform: translate(-50%, -50%) rotate(90deg); } #product-show-page .accordion-wrap .accordion-title.active { background-color: #5f89b4; color: #fff; } #product-show-page .accordion-wrap .accordion-title.active .accordion-icon { transition: all 0.3s ease; transform: rotate(360deg); } #product-show-page .accordion-wrap .accordion-title.active .accordion-icon:before { content: none; } #product-show-page .accordion-wrap .accordion-title.active .accordion-icon:after { background-color: #fff; } #product-show-page .accordion-wrap .accordion-content { display: none; padding: max(2.083vw, 30px) max(2.083vw, 20px); background-color: #fff; font-family: "DM Sans", 微軟正黑體, "Microsoft JhengHei", PingFang, sans-serif; font-size: 16px; font-weight: normal; font-style: normal; letter-spacing: 0.16; line-height: 1.4; text-transform: none; font-optical-sizing: auto; color: #4d4d4d; } #product-show-page .accordion-wrap .accordion-content p { margin-bottom: 0; } #product-show-page .accordion-wrap .accordion-content .ac-title { font-weight: bold; margin-bottom: 5px; } #content { padding-bottom: 5.99vw; padding-bottom: 0; padding-bottom: 13.021vw; } #content.NameCardBox { position: relative; } #content.NameCardBox::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; width: 100%; height: 68.802vw; background-image: url("/images/project/176/esg_bg.png"); background-position: bottom center; background-repeat: no-repeat; background-size: cover; z-index: -2; opacity: 0.26; } #content.ProductMainLayoutBox { padding-bottom: 0; } #content.AboutLayoutBox { padding-bottom: 0; } #content.CdmoBox { position: relative; } #content.CdmoBox::after { content: ""; background-image: url("/images/project/176/cdmo_ins_bg.png"); background-size: cover; background-repeat: no-repeat; background-position: center center; width: 102.969vw; height: 29.792vw; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); z-index: -1; } #inner_btnarea { text-align: right; } #main_title { font-size: clamp(26px, 4.167vw, 80px); font-size: clamp(26px, 2.5vw, 48px); color: #070707; line-height: 1; font-weight: 600; position: relative; display: none; } #main_title::before { content: ""; position: absolute; left: -1.823vw; left: 0; top: -1.5625vw; background-image: url("/images/project/176/title_icon.png"); background-repeat: no-repeat; background-size: contain; width: 59px; height: 74px; width: max(3.073vw, 22px); height: max(3.854vw, 29px); } #main_title.animated span { -webkit-animation: leftIn 1s both; animation: leftIn 1s both; } .pd-title { font-size: clamp(26px, 4.167vw, 80px); font-size: clamp(26px, 2.5vw, 48px); color: #070707; line-height: 1; font-weight: 600; white-space: nowrap; position: relative; padding-left: 1.5625vw; margin-bottom: 4.6875vw; white-space: normal; } .pd-title::before { content: ""; position: absolute; left: -1.823vw; left: 0; top: -1.5625vw; background-image: url("/images/project/176/title_icon.png"); background-repeat: no-repeat; background-size: contain; width: 59px; height: 74px; width: max(3.073vw, 22px); height: max(3.854vw, 29px); } .pd-title.animated span { -webkit-animation: leftIn 1s both; animation: leftIn 1s both; } .layout_title_wrap .item { display: flex; align-items: flex-start; margin-bottom: 4.6875vw; } .layout_title_wrap .item #main_title { display: block; margin-bottom: 0; min-width: 31.771vw; padding-left: 1.5625vw; padding-right: 1.5625vw; } .cate_summary { font-size: clamp(16px, 0.833vw, 16px); font-size: clamp(16px, 1.25vw, 24px); line-height: 1.2; color: #174272; font-weight: 600; } .layoutBox.isUpSideBox { padding-top: 0 !important; } .layoutBox.no_banner_Page_box { padding-top: 0 !important; position: relative; } .layoutBox.no_banner_Page_box::before { content: ""; position: absolute; top: -6.771vw; right: 0; width: 37.5vw; height: 33.4375vw; background-image: url("/images/project/176/nobanner_bg.png"); background-size: cover; background-position: bottom left; background-repeat: no-repeat; } @media (max-width: 1500px) { .layoutBox.no_banner_Page_box::before { top: -11vw; } } #mwebApp a { color: #222222; transition: all 0.3s; } #mwebApp a:hover { color: #01429D; } #react_main { padding-top: 30px; padding-bottom: 30px; } #search_page { padding-top: 30px; padding-bottom: 30px; } #bread_area { transition: all 0.1s; position: relative; } #bread_area > .container { padding: 0; } #bread_area .breadcrumb { background: inherit; padding-left: 0; padding-right: 0; margin: 0; padding: 4.167vw 0 2.083vw; padding: 4.167vw 0 5.083vw; align-items: baseline; } #bread_area .breadcrumb-item { font-size: clamp(16px, 0.833vw, 16px); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.5; } #bread_area .breadcrumb-item.active { font-size: clamp(16px, 0.833vw, 16px); font-size: clamp(16px, 1.5vw, 18px); color: #4D4D4D; font-weight: 600; } #bread_area .breadcrumb-item + .breadcrumb-item { padding-left: 0.521vw; } #bread_area .breadcrumb-item + .breadcrumb-item::before { content: ">"; color: #4D4D4D; padding-right: 0.521vw; } #bread_area a { color: #4D4D4D; transition: all 0.3s; } #bread_area a:hover { color: #4D4D4D; } .breadcrumbWrap.no_banner #bread_area .breadcrumb { padding: 4.167vw 0 4.6875vw; } .outer_border { border-radius: max(1.5625vw, 15px); overflow: hidden; background-color: #ffffff; } #aside_menu { margin-right: 3.385vw; } #aside_menu #aside_title { font-size: clamp(18px, 1.667vw, 32px); font-weight: 600; margin-bottom: 1.5625vw; color: #070707; } #aside_menu #aside_menu_main_ul, #aside_menu .aside_menu_main_ul { list-style: none; padding: 0; margin: 0; margin-bottom: 0px; } #aside_menu #aside_menu_main_ul li, #aside_menu .aside_menu_main_ul li { background: transparent; padding: 0; position: relative; } #aside_menu #aside_menu_main_ul li .aside_title, #aside_menu .aside_menu_main_ul li .aside_title { width: 100%; border-bottom: 2px solid #F3F8FD; background-color: #ffffff; transition: all 0.3s; } #aside_menu #aside_menu_main_ul li .aside_title.opened_category, #aside_menu .aside_menu_main_ul li .aside_title.opened_category { background-color: transparent; color: #174272; } #aside_menu #aside_menu_main_ul li .aside_title.opened_category a, #aside_menu .aside_menu_main_ul li .aside_title.opened_category a { color: #174272; font-weight: 600; } #aside_menu #aside_menu_main_ul li .aside_title.opened_category #icon_open, #aside_menu .aside_menu_main_ul li .aside_title.opened_category #icon_open { color: #174272; } #aside_menu #aside_menu_main_ul li .aside_title:hover, #aside_menu .aside_menu_main_ul li .aside_title:hover { background-color: transparent; color: #174272; } #aside_menu #aside_menu_main_ul li .aside_title:hover a, #aside_menu .aside_menu_main_ul li .aside_title:hover a { color: #174272; font-weight: 600; } #aside_menu #aside_menu_main_ul li .aside_title:hover #icon_open, #aside_menu .aside_menu_main_ul li .aside_title:hover #icon_open { color: #174272; } #aside_menu #aside_menu_main_ul li .aside_title a, #aside_menu .aside_menu_main_ul li .aside_title a { padding: 1.042vw 1.5625vw; font-size: clamp(15px, 0.9375vw, 18px); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.5; color: #070707; transition: all 0.3s; width: 100%; } #aside_menu #aside_menu_main_ul li .aside_title .d-table-cell, #aside_menu .aside_menu_main_ul li .aside_title .d-table-cell { width: 88%; } #aside_menu #aside_menu_main_ul li #icon_open, #aside_menu #aside_menu_main_ul li .icon_open, #aside_menu .aside_menu_main_ul li #icon_open, #aside_menu .aside_menu_main_ul li .icon_open { padding-left: 10px !important; cursor: pointer; color: #070707; } #aside_menu #aside_menu_main_ul li .children_items, #aside_menu .aside_menu_main_ul li .children_items { list-style: none; padding: 0; background: transparent; } #aside_menu #aside_menu_main_ul li .children_items li, #aside_menu .aside_menu_main_ul li .children_items li { background: transparent; } #aside_menu #aside_menu_main_ul li .children_items li .aside_title:hover, #aside_menu .aside_menu_main_ul li .children_items li .aside_title:hover { background-color: #174272; } #aside_menu #aside_menu_main_ul li .children_items li .aside_title:hover a, #aside_menu .aside_menu_main_ul li .children_items li .aside_title:hover a { color: #ffffff; } #aside_menu #aside_menu_main_ul li .children_items li .aside_title:hover #icon_open, #aside_menu .aside_menu_main_ul li .children_items li .aside_title:hover #icon_open { color: #ffffff; } #aside_menu #aside_menu_main_ul li .children_items li .aside_title.opened_category, #aside_menu .aside_menu_main_ul li .children_items li .aside_title.opened_category { background-color: #174272; } #aside_menu #aside_menu_main_ul li .children_items li .aside_title.opened_category a, #aside_menu .aside_menu_main_ul li .children_items li .aside_title.opened_category a { color: #ffffff; } #aside_menu #aside_menu_main_ul li .children_items li .aside_title.opened_category #icon_open, #aside_menu .aside_menu_main_ul li .children_items li .aside_title.opened_category #icon_open { color: #ffffff; } #aside_menu #aside_menu_main_ul li .children_items li a, #aside_menu .aside_menu_main_ul li .children_items li a { color: #070707; font-size: clamp(16px, 0.833vw, 16px); font-size: clamp(16px, 1.5vw, 18px); line-height: 1.5; padding-left: 2.083vw; } #aside_menu #aside_menu_main_ul li .children_items li a.current, #aside_menu .aside_menu_main_ul li .children_items li a.current { color: #ffffff; background-color: #174272; } #aside_menu #aside_menu_main_ul li a#icon_open[aria-expanded=true]::before, #aside_menu #aside_menu_main_ul li a.icon_open[aria-expanded=true]::before, #aside_menu #aside_menu_main_ul li a#icon_open[data-show=show]::before, #aside_menu #aside_menu_main_ul li a.icon_open[data-show=show]::before, #aside_menu .aside_menu_main_ul li a#icon_open[aria-expanded=true]::before, #aside_menu .aside_menu_main_ul li a.icon_open[aria-expanded=true]::before, #aside_menu .aside_menu_main_ul li a#icon_open[data-show=show]::before, #aside_menu .aside_menu_main_ul li a.icon_open[data-show=show]::before { content: "-"; transition: all 0.3s; font-size: clamp(14px, 1.042vw, 20px); } #aside_menu #aside_menu_main_ul li a#icon_open::before, #aside_menu #aside_menu_main_ul li a.icon_open::before, #aside_menu #aside_menu_main_ul li a#icon_open[aria-expanded=false]::before, #aside_menu #aside_menu_main_ul li a.icon_open[aria-expanded=false]::before, #aside_menu .aside_menu_main_ul li a#icon_open::before, #aside_menu .aside_menu_main_ul li a.icon_open::before, #aside_menu .aside_menu_main_ul li a#icon_open[aria-expanded=false]::before, #aside_menu .aside_menu_main_ul li a.icon_open[aria-expanded=false]::before { content: "+"; transition: all 0.3s; font-size: clamp(14px, 1.042vw, 20px); } .cdme_menu_wrap.cdmeMenuLeaf { display: none !important; } .cdme_menu_wrap.fixed { position: fixed; top: calc(var(--header-height, 0px)); top: var(--header-height); top: 5.729vw; left: 50%; transform: translateX(-50%); z-index: 11; right: auto; z-index: 999; margin-left: 0; } .cdme_menu_wrap.fixed .item { padding: 0 15px; } .cdme_menu_wrap.fixed .item ul { background: linear-gradient(115deg, rgba(208, 225, 234, 0.4), rgba(134, 171, 188, 0.3)), rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-radius: max(1.5625vw, 15px); margin-top: 1.5625vw; } .cdme_menu_wrap .item ul { display: flex; align-items: stretch; flex-wrap: wrap; padding: 0; margin: 0; list-style: none; margin: 0 -0.78125vw; } .cdme_menu_wrap .item ul li { width: 33.3333333333%; padding: 0.78125vw; } .cdme_menu_wrap .item ul li a { font-size: clamp(15px, 1.042vw, 20px); text-align: center; color: #174272; transition: all 0.3s; border-radius: max(1.5625vw, 15px); background-color: #ffffff; padding: 0.78125vw; width: 100%; font-weight: 600; display: flex; align-items: center; justify-content: center; } .cdme_menu_wrap .item ul li a:hover { color: #FFFFFF; background-color: #174272; } .cdme_menu_wrap .item ul li a:hover .icon { opacity: 1; display: block; } .cdme_menu_wrap .item ul li a .icon { margin-left: 1.302vw; display: none; opacity: 0; transition: all 0.3s; } .layoutWrap .title_item { display: none; } .layoutWrap .cate_summary { display: none; } .cdmoWrap #message_show_page > .container { max-width: 100%; padding: 0; } .ProductLayoutWrap #list_grid_v2 .grid_v2_item .grid_v2_content .grid_v2_img .thumb img { -o-object-fit: contain; object-fit: contain; width: auto; height: auto; -o-object-position: initial; object-position: initial; } #list_grid_v2.ProductMainGrid .grid_v2_item { flex: 0 0 50%; max-width: 50%; } #list_grid_v2.ProductMainGrid .grid_v2_item .grid_v2_content .grid_v2_info .grid_v2_title a { font-size: clamp(16px, 1.5625vw, 30px); padding: 0.78125vw 0; } #list_grid_v2.ProductMainGrid .grid_v2_item .grid_v2_content .grid_v2_info .grid_v2_title a .more { display: none; } #list_grid_v2.ProductMainGrid .grid_v2_item .grid_v2_content .grid_v2_info .grid_v2_summary { display: none; } #list_grid_v2.cdmo_grid { margin-top: 8.333vw; } #list_grid_v2.cdmo_grid .grid_v2_item { padding-bottom: 8.333vw; } #list_grid_v2.cdmo_grid .grid_v2_item:nth-child(odd) .grid_v2_content { flex-direction: row-reverse; } #list_grid_v2.cdmo_grid .grid_v2_item:nth-child(odd) .grid_v2_content .img_wrap .item { padding-left: 4.427vw; padding-right: 0; } #list_grid_v2.cdmo_grid .grid_v2_item:nth-child(odd) .grid_v2_content .txt_wrap .item { padding-right: 0vw; padding-left: 4.6875vw; } #list_grid_v2.cdmo_grid .grid_v2_item:nth-child(odd) .grid_v2_content .txt_wrap .item::after { background-image: url("/images/project/176/cdmo_icon01.png"); right: auto; left: 10%; } #list_grid_v2.cdmo_grid .grid_v2_item:nth-child(odd) .grid_v2_content .txt_wrap .item::before { left: 0px; right: auto; } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content { position: relative; } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .txt_wrap { display: flex; align-items: flex-end; } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .txt_wrap .item { position: relative; padding: 6.25vw 0; padding-right: 4.6875vw; width: 100%; position: relative; } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .txt_wrap .item::after { content: ""; width: max(8.333vw, 80px); height: max(8.333vw, 80px); position: absolute; background-image: url("/images/project/176/cdmo_icon02.png"); background-position: center center; background-repeat: no-repeat; background-size: cover; position: absolute; top: -4.167vw; right: 10%; } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .txt_wrap .item::before { content: ""; position: absolute; bottom: 0; right: 0vw; width: 78.125vw; height: 100%; border-radius: max(1.5625vw, 15px); border: 1px solid #ffffff; background: linear-gradient(115deg, rgba(208, 225, 234, 0.4), rgba(134, 171, 188, 0.3)), rgba(255, 255, 255, 0.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); z-index: -1; } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .txt_wrap .item .grid_v2_title a { font-size: clamp(18px, 1.667vw, 32px); color: #174272; font-weight: 600; display: block; margin-bottom: 1.302vw; padding: 0; } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .txt_wrap .item .grid_v2_summary { font-size: clamp(16px, 0.833vw, 16px); line-height: 1.3; margin-bottom: 1.5625vw; -webkit-line-clamp: 3; } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .txt_wrap .item .more { display: flex; align-items: center; } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .txt_wrap .item .more a { display: flex; align-items: center; color: #174272; transition: all 0.3s; font-size: clamp(16px, 0.833vw, 16px); } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .txt_wrap .item .more a .moreTxt { margin-left: 0.78125vw; } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .txt_wrap .item .more a .icon { display: flex; align-items: center; justify-content: center; transition: all 0.3s; width: 28px; height: 28px; width: max(1.458vw, 20px); height: max(1.458vw, 20px); background-color: #AFD6F3; border-radius: 50%; } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .txt_wrap .item .more a .icon svg { width: 100%; transition: 0.35s; width: 8px; width: max(0.417vw, 5px); } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .txt_wrap .item .more a:hover { background-color: #AFD6F3; border-radius: 30px; } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .txt_wrap .item .more a:hover .moreTxt { margin-right: 1.5625vw; } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .img_wrap .item { padding-bottom: 2.604vw; padding-right: 4.427vw; } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .img_wrap .item .img { height: 24.74vw; overflow: hidden; border-radius: max(1.5625vw, 15px); } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .img_wrap .item .img img { -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center; height: 100%; width: 100%; } #list_grid_v2.nameCard_grid > .row { margin: 0 -4.948vw; } #list_grid_v2.nameCard_grid > .row .grid_v2_item { padding: 0 4.948vw; } #list_grid_v2.nameCard_grid .grid_v2_item .grid_v2_content .grid_v2_img:hover .thumb img { transform: scale(1.05); } #list_grid_v2.nameCard_grid .grid_v2_item .grid_v2_content .grid_v2_img .thumb::after { padding-top: 126%; } #list_grid_v2.nameCard_grid .grid_v2_item .grid_v2_content .grid_v2_img .thumb img { transition: all 1s; } #list_grid_v2.nameCard_grid .grid_v2_item .grid_v2_content .grid_v2_info .grid_v2_title a { font-size: clamp(18px, 1.667vw, 32px); } #list_grid_v2.nameCard_grid .grid_v2_item .grid_v2_content .grid_v2_info .grid_v2_summary { font-size: clamp(16px, 0.833vw, 16px); font-size: clamp(16px, 1.146vw, 22px); margin-bottom: 1.042vw; margin-bottom: 0.5vw; } #list_grid_v2.nameCard_grid .grid_v2_item .grid_v2_content .grid_v2_info .more { display: flex; align-items: center; } #list_grid_v2.nameCard_grid .grid_v2_item .grid_v2_content .grid_v2_info .more a { display: flex; align-items: center; color: #174272; transition: all 0.3s; font-size: clamp(16px, 0.833vw, 16px); } #list_grid_v2.nameCard_grid .grid_v2_item .grid_v2_content .grid_v2_info .more a .moreTxt { margin-left: 0.78125vw; } #list_grid_v2.nameCard_grid .grid_v2_item .grid_v2_content .grid_v2_info .more a .icon { display: flex; align-items: center; justify-content: center; transition: all 0.3s; width: 28px; height: 28px; width: max(1.458vw, 20px); height: max(1.458vw, 20px); min-width: max(1.458vw, 20px); background-color: #AFD6F3; border-radius: 50%; } #list_grid_v2.nameCard_grid .grid_v2_item .grid_v2_content .grid_v2_info .more a .icon svg { width: 100%; transition: 0.35s; width: 8px; width: max(0.417vw, 5px); } #list_grid_v2.nameCard_grid .grid_v2_item .grid_v2_content .grid_v2_info .more a:hover { background-color: #AFD6F3; border-radius: 30px; } #list_grid_v2.nameCard_grid .grid_v2_item .grid_v2_content .grid_v2_info .more a:hover .moreTxt { margin-right: 1.5625vw; } #list_grid_v2.nameCard_grid .grid_v2_item .grid_v2_content .grid_v2_info .more a:hover .icon .button__arrow--in { transform: translateX(-50%); } #list_grid_v2.nameCard_grid .grid_v2_item .grid_v2_content .grid_v2_info .more a:hover .icon .button__arrow--out { transform: translateX(60px); } #list_grid_v2 .grid_v2_item .grid_v2_content:hover .grid_v2_img .more { opacity: 1; } #list_grid_v2 .grid_v2_item .grid_v2_content:hover .grid_v2_info .num { opacity: 0; } #list_grid_v2 .grid_v2_item .grid_v2_content:hover .grid_v2_info .grid_v2_title a { color: #01429D; } #list_grid_v2 .grid_v2_item .grid_v2_content .grid_v2_img { position: relative; display: block; } #list_grid_v2 .grid_v2_item .grid_v2_content .grid_v2_img .thumb { border-radius: max(1.5625vw, 15px); overflow: hidden; background-color: #ffffff; } #list_grid_v2 .grid_v2_item .grid_v2_content .grid_v2_img .thumb img { -o-object-fit: cover; object-fit: cover; width: 100%; height: 100%; -o-object-position: center center; object-position: center center; } #list_grid_v2 .grid_v2_item .grid_v2_content .grid_v2_img .thumb::after { padding-top: 75%; } #list_grid_v2 .grid_v2_item .grid_v2_content .grid_v2_info { position: relative; } #list_grid_v2 .grid_v2_item .grid_v2_content .grid_v2_info .grid_v2_title { margin: 0; } #list_grid_v2 .grid_v2_item .grid_v2_content .grid_v2_info .grid_v2_title a { text-align: center; font-size: clamp(16px, 1.042vw, 20px); text-align: left; color: #174272; font-weight: 600; display: flex; align-items: center; justify-content: space-between; padding: 1.042vw 0 0.5vw; margin: 0; transition: all 0.3s; } #list_grid_v2 .grid_v2_item .grid_v2_content .grid_v2_info .grid_v2_title a .more { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; width: max(2.083vw, 25px); height: max(2.083vw, 25px); min-width: max(2.083vw, 25px); border-radius: 50%; background-color: #AFD6F3; margin-left: 0.78125vw; } #list_grid_v2 .grid_v2_item .grid_v2_content .grid_v2_info .grid_v2_summary { font-size: clamp(16px, 0.833vw, 16px); font-size: 22px; font-size: 1.146vw; font-size: clamp(16px, 1.146vw, 22px); color: #4D4D4D; overflow: hidden; transition: all 0.3s; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } #list_grid_v2 .grid_v2_item .grid_v2_content .product_list { display: none !important; } #list_grid_v2 .grid_v2_item .grid_v2_content .product_list .item-model { display: none; } #list_grid_v2 .grid_v2_item .grid_v2_content .product_list .input-group > div { width: 100%; } #list_grid_v2 .grid_v2_item .grid_v2_content .product_list .input-group .add-to-cart { width: 100%; } .productLayoutWrap #list_grid_v2 .grid_v2_item { flex: 0 0 100%; max-width: 100%; border: none; position: relative; } .productLayoutWrap #list_grid_v2 .grid_v2_item::before { content: ""; position: absolute; bottom: 0; left: 0%; width: 200%; height: 1px; background-color: #55B1E7; } .productLayoutWrap #list_grid_v2 .grid_v2_item .grid_v2_content { display: flex; align-items: stretch; padding: 7.03125vw 2.604vw; padding-right: 0; } .productLayoutWrap #list_grid_v2 .grid_v2_item .grid_v2_content .grid_v2_img { width: 17.708vw; display: block; min-width: 17.708vw; margin-right: 1.5625vw; } .productLayoutWrap #list_grid_v2 .grid_v2_item .grid_v2_info { width: calc(100% - 17.708vw); } .productLayoutWrap #list_grid_v2 .grid_v2_item .grid_v2_info .num { display: none; } .productLayoutWrap #list_grid_v2 .grid_v2_item .grid_v2_info .model { display: block; } .productLayoutWrap #list_grid_v2 .grid_v2_item .grid_v2_info .grid_v2_title a { margin-bottom: 0.78125vw; } #news_cate_page #list_grid_v2.related_grid .grid_v2_item .grid_v2_content .grid_v2_img .thumb { background: transparent; } #news_cate_page #list_grid_v2.related_grid .grid_v2_item .grid_v2_content .grid_v2_img .thumb img { max-width: 100%; max-height: 100%; } #news_cate_page #list_grid_v2.related_grid .grid_v2_item .grid_v2_content .grid_v2_info .grid_v2_title .num { display: none; } #product-show-page > .container-fluid { padding: 0; } #product-show-page .pro_detail { margin-bottom: 3.646vw; } #product-show-page .product-show-left { display: flex; align-items: stretch; } #product-show-page .product-show-left .big-img-block:not(.small-img-block) { max-height: none; max-height: 23.958vw; border-radius: max(1.5625vw, 15px); overflow: hidden; } #product-show-page .product-show-left .small-img-block:not(.small-img-block) { max-height: none; } #product-show-page .product-show-left .big-img-block:not(.big-img-block) { max-height: none; } #product-show-page .product-show-left .small-img-block:not(.big-img-block) { max-height: none; max-height: 4.792vw; margin-bottom: 1.042vw; } #product-show-page .product-show-left .main-carousel { width: 82%; width: 100%; } #product-show-page .product-show-left .big-img-block::after { display: none; } #product-show-page .product-show-left .big-img-block img { max-width: 100%; max-height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center; } #product-show-page .product-show-left .small-img-block { border-radius: max(0.521vw, 5px); overflow: hidden; } #product-show-page .product-show-left .small-img-block::after { border-color: transparent; width: 100%; height: 100%; border-radius: max(0.521vw, 5px); } #product-show-page .product-show-left .small-img-block img { max-width: 100%; max-height: 100%; width: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: center center; object-position: center center; } #product-show-page .product-show-left .sub-carousel { width: 18%; padding-left: 1.5625vw; display: none !important; } #product-show-page .product-show-left .sub-carousel .slick-list { height: 23.958vw !important; } #product-show-page .product-show-left .sub-carousel .slick-current .small-img-block::after { border-color: #070707; background-color: transparent; opacity: 1; z-index: 111; } #product-show-page .product-show-left .main-carousel .carousel-arrow { border: none; background: transparent; color: #777777; transition: all 0.3s; top: auto; bottom: 1%; transform: none; } #product-show-page .product-show-left .main-carousel .carousel-arrow.carousel-prev { left: 30%; } #product-show-page .product-show-left .main-carousel .carousel-arrow.carousel-next { right: 30%; } #product-show-page .product-show-left .main-carousel .carousel-arrow:hover { color: #C41F28; } #product-show-page .product-show-right .content-title { font-size: clamp(26px, 2.5vw, 48px); font-size: clamp(20px, 1.875vw, 36px); color: #070707; line-height: 1; font-weight: 600; position: relative; padding-left: 1.5625vw; padding-right: 1.5625vw; margin-top: 2.083vw; margin-bottom: 2.083vw; } #product-show-page .product-show-right .content-title::before { content: ""; position: absolute; left: -1.823vw; left: 0; bottom: 0; background-image: url(/images/project/176/title_icon.png); background-repeat: no-repeat; background-size: cover; width: max(3.073vw, 22px); height: max(3.854vw, 29px); } #product-show-page .product-show-right .product-show-desc { margin-bottom: 1.042vw; font-size: clamp(16px, 0.833vw, 16px); margin-bottom: 4.167vw; line-height: 2; margin-bottom: 4.167vw; } #product-show-page .product-show-right .img_item { margin: 0 -5px; margin-top: 30px; display: flex; align-items: stretch; flex-wrap: wrap; margin-bottom: 4.167vw; } #product-show-page .product-show-right .img_item .icon { padding: 0.208vw; } #product-show-page .product-show-right .img_item .icon img { width: 3.073vw; } #product-show-page .product-show-right #products_detail_spec { margin-top: 0 !important; border-top: none !important; display: none !important; } #product-show-page .product-show-right #products_detail_spec .table tr { display: flex; align-items: center; position: relative; } #product-show-page .product-show-right #products_detail_spec .table tr.tr_amount::before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: #ffffff; box-shadow: 0 1px 2px rgba(85, 177, 231, 0.5); } #product-show-page .product-show-right #products_detail_spec .table tr td:first-child { font-weight: 400; padding-left: 0; } #product-show-page .product-show-right #products_detail_spec .table .tr_amount .detail_value .amount { border: 1px solid #707070; border: none; width: max(4.6875vw, 60px); } #product-show-page .product-show-right #products_detail_spec .table .tr_amount .detail_value .amount .input-group .input-group-prepend .btn { border: none; border-radius: 0; background: transparent; padding: 0; } #product-show-page .product-show-right #products_detail_spec .table .tr_amount .detail_value .amount .input-group .form-control { border: none; text-align: center; background: transparent; } #product-show-page .product-show-right #products_detail_spec .table .tr_amount .detail_value .amount .input-group .input-group-append .btn { border: none; border-radius: 0; background: transparent; padding: 0; } #product-show-page .product-show-right #products_detail_spec .table .tr_button::before { display: none; } #product-show-page .product-show-right #products_detail_spec .table .tr_button .td_button { padding-top: 1.823vw !important; } #product-show-page .product-show-right #products_detail_spec .table .tr_button .td_button #detail_button { flex-wrap: wrap; } #product-show-page .product-show-right #products_detail_spec .table .tr_button .td_button #detail_button button { background: transparent; border: 1px solid #55B1E7 !important; transition: all 0.3s; color: #55B1E7; transition: all 0.3s; display: flex; align-items: center; justify-content: center; border-radius: 30px !important; display: flex; align-items: center; justify-content: center; font-size: clamp(16px, 0.833vw, 16px); } #product-show-page .product-show-right #products_detail_spec .table .tr_button .td_button #detail_button button .wb { margin-right: 7px; font-size: clamp(15px, 1.042vw, 20px); } #product-show-page .product-show-right #products_detail_spec .table .tr_button .td_button #detail_button button:hover { background-color: #55B1E7 !important; border: 1px solid #55B1E7 !important; color: #fff !important; text-shadow: none; } #product-show-page .product-show-right #products_detail_spec .table .tr_button .td_button #detail_button .add-to-cart { width: 15.104vw; height: 3.125vw; min-width: 200px; min-height: 40px; font-size: clamp(16px, 0.833vw, 16px); } #detail_tab { padding: 0; position: relative; } #detail_tab .product-show-tabs .nav-tabs { border-bottom: none; } #detail_tab .product-show-tabs .nav-tabs .nav-item .nav-link { padding: 1.042vw 2.865vw; line-height: 1; color: #174272; font-weight: 600; border-top-left-radius: max(0.521vw, 5px); border-top-right-radius: max(0.521vw, 5px); background-color: rgba(208, 225, 234, 0.3); position: relative; overflow: hidden; } #detail_tab .product-show-tabs .nav-tabs .nav-item .nav-link::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; top: 0; background-image: url("/images/project/176/item_bg.png"); background-position: center center; background-repeat: no-repeat; opacity: 0.15; z-index: -1; } #detail_tab .product-show-tabs .nav-tabs .nav-item .nav-link.active { border: 1px solid #ffffff; border-bottom: none; } #detail_tab .product-show-tabs .nav-tabs .nav-item .nav-link h2 { font-size: clamp(16px, 0.833vw, 16px); font-weight: 600; margin: 0; } #detail_tab .tab-content { border: none; border-radius: 0; background-color: transparent; border-bottom-left-radius: max(0.521vw, 5px); border-bottom-right-radius: max(0.521vw, 5px); border: 1px solid #ffffff; padding: 3.90625vw 2.865vw; font-size: clamp(16px, 0.833vw, 16px); color: #4D4D4D; background-color: rgba(208, 225, 234, 0.3); position: relative; overflow: hidden; border-top: none; } #detail_tab .tab-content::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; top: 0; background-image: url("/images/project/176/item_bg.png"); background-size: cover; background-position: center center; background-repeat: no-repeat; opacity: 0.15; z-index: -1; } #detail_tab .tab-content .tab-pane { max-width: 100%; padding: 0; } #detail_tab .tab-content .tab-pane p { margin-bottom: 15px; } #lightbox { background: rgba(0, 0, 0, 0.5); z-index: 9999; } #lightbox .modal-content { display: inline-block; text-align: center; } #lightbox .modal-content img { max-width: 100%; max-height: 87vh; } .related_area { padding: 5.208vw 0 5.208vw; } .related_area .container { max-width: 100%; } .related_area .related_title { background: transparent; font-size: clamp(18px, 1.667vw, 32px); font-size: clamp(20px, 1.875vw, 36px); font-weight: 600; text-align: left; color: #070707; margin-bottom: 2.865vw; } #related_area { padding: 5.208vw 0 5.208vw; } #related_area .container { max-width: 100%; } #related_area .related_title { background: transparent; font-size: clamp(18px, 1.667vw, 32px); font-size: clamp(20px, 1.875vw, 36px); font-weight: 600; text-align: left; color: #070707; margin-bottom: 2.865vw; } #contactus .contact_head_text { text-align: center; margin-bottom: 25px; font-size: 0.875em; line-height: 30px; font-weight: 700; } #contactus .contactus_information_area { padding: 20px; background: #fff; border: 1px solid #e8e8e8; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); margin-bottom: 20px; } #contactus .contactus_information_area .information_title { border-bottom: 1px solid #929497; padding-bottom: 10px; margin-bottom: 25px; } #contactus .contactus_information_area ul { list-style: none; padding: 0; margin: 0; color: #333; } #contactus .contactus_information_area ul li { display: table; font-size: 0.875em; margin-bottom: 30px; font-size: clamp(16px, 1.5vw, 18px); line-height: 1.5; } #contactus .contactus_information_area ul li span { display: table-cell; } #contactus .contactus_information_area ul li a { color: #333; display: table-cell; } #contactus .contactus_information_area ul li a:hover { color: #d60000; } #contactus .contactus_information_area svg:not(:root).svg-inline--fa { width: 15px; margin-right: 10px; } #contactus .contactus_information_area svg:not(:root).svg-inline--fa[data-icon=phone] { transform: scaleX(-1); } #contactus .contactus_form_area { border: 1px solid #e8e8e8; padding: 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); } #contactus .contactus_form_area .form_title { border-bottom: 1px solid #929497; padding-bottom: 10px; margin-bottom: 25px; } #contactus .contactus_form_area > .col-12 { padding: 0; } #list_strip_v2 .strip_v2_item .strip_v2_content .strip_v2_title a { padding: 0; font-size: clamp(18px, 1.458vw, 28px); font-weight: 700; color: #222222; display: block; margin-bottom: 2.083vw; } #list_strip > .row > .col-12 { margin-bottom: 2.083vw; } #list_strip .newsList_wrap:first-child .newsListInsItem .item:first-child { border-top: 1px solid #707070; } #list_strip .newsList_wrap .year_item .year { font-size: clamp(24px, 3.542vw, 68px); color: #FFFFFF; line-height: 1; padding: 5.208vw 0; position: relative; z-index: 1; } #list_strip .newsList_wrap .year_item .year::before { content: ""; position: absolute; top: 0; bottom: 0; right: 0; border-top-right-radius: max(0.521vw, 5px); border-bottom-right-radius: max(0.521vw, 5px); background-image: linear-gradient(125deg, rgba(85, 177, 231, 0.1), #55B1E7); width: 24.479vw; z-index: -1; } #list_strip .newsList_wrap .newsListInsItem .item { border-bottom: 1px solid #707070; } #list_strip .newsList_wrap .newsListInsItem .item a { display: flex; align-items: center; padding: 3.385vw 0; transition: all 0.3s; } #list_strip .newsList_wrap .newsListInsItem .item a:hover { cursor: url("/images/project/876/btn-more.png"), pointer; } #list_strip .newsList_wrap .newsListInsItem .item a:hover .date { color: #DC000C; } #list_strip .newsList_wrap .newsListInsItem .item a:hover .txt_item .title { color: #DC000C; } #list_strip .newsList_wrap .newsListInsItem .item a:hover .txt_item .strip_v2_summary { color: #DC000C; } #list_strip .newsList_wrap .newsListInsItem .item a .date { width: 16.667vw; min-width: 16.667vw; font-size: 50px; font-size: 2.604vw; font-size: clamp(20px, 2.604vw, 50px); line-height: 1; padding-left: 2.604vw; color: #222222; transition: all 0.3s; } #list_strip .newsList_wrap .newsListInsItem .item a .date .strip_publictime { display: flex; align-items: baseline; } #list_strip .newsList_wrap .newsListInsItem .item a .date .strip_publictime .month { width: 4.427vw; min-width: 4.427vw; margin-right: 1.5625vw; font-weight: 500; } #list_strip .newsList_wrap .newsListInsItem .item a .txt_item { width: calc(100% - 320px); } #list_strip .newsList_wrap .newsListInsItem .item a .txt_item .title { font-size: clamp(18px, 1.667vw, 32px); line-height: 1.5; color: #222222; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; margin-bottom: 10px; font-weight: 500; transition: all 0.3s; } #list_strip .newsList_wrap .newsListInsItem .item a .txt_item .strip_v2_summary { font-size: clamp(14px, 1.042vw, 20px); color: #222222; width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: all 0.3s; } #list_strip .newsList_wrap .newsListInsItem .item a .txt_item .strip_v2_summary p { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: none; } #list_strip .newsList_wrap .newsListInsItem .item a .txt_item .strip_v2_summary p:first-child { display: block; } #list_strip .strip_cate_item .strip_cate_content .strip_title { color: #174272; font-size: clamp(16px, 1.25vw, 24px); font-weight: 600; line-height: 1.2; margin-bottom: 1.302vw; } #list_strip .strip_cate_item .strip_cate_content .strip_cate_summary { margin-top: 10px; font-size: clamp(16px, 0.833vw, 16px); color: #4D4D4D; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; margin-bottom: 1.302vw; } #news_show_page .news_content > .container { padding: 0; } #news_show_page .publictime { margin-bottom: 20px; color: #999; } #list_accordion .accordion_content { padding: 0; } #list_accordion .accordion_content .accordion_item .accordion { background: #000; } #list_accordion .accordion_content .accordion_item .panel { background: #e9e9e9; } #product-show-page .product-show-right #attach_area { margin-top: 0px; } #product-show-page .product-show-right #attach_area .btn-download { border-radius: 0px; } #product-show-page .product-show-right #attach_area .btn-secondary { color: #55B1E7; background-color: transparent; border-color: #55B1E7; display: flex; align-items: center; justify-content: center; min-width: 10.417vw; min-height: 2.083vw; min-width: 200px; min-height: 40px; border-radius: 40px; padding: 0.78125vw 1.5625vw; font-size: clamp(16px, 0.833vw, 16px); } #product-show-page .product-show-right #attach_area .btn-secondary .icon { margin-right: 0.78125vw; } #product-show-page .product-show-right #attach_area .btn-secondary .arrow { margin-left: 1.042vw; } #product-show-page .product-show-right #attach_area .btn-secondary .arrow svg { transform: rotate(-90deg); } #product-show-page .product-show-right #attach_area .btn-secondary:hover { background: #55B1E7; color: #fff; border-color: #55B1E7; } #product-show-page .product-show-right #attach_area .btn-secondary:hover svg path { stroke: #ffffff !important; } #product-show-page .product-show-right #attach_area .btn-secondary:hover svg line { stroke: #ffffff !important; } #product-show-page .product-show-right #attach_area .btn-secondary.dropdown-toggle::after { display: none; } #product-show-page .product-show-right #attach_area .dropdown.show { transition: all 0.3s; } #product-show-page .product-show-right #attach_area .dropdown.show .btn-secondary { color: #fff; background-color: #C41F28; border-color: #C41F28; } #product-show-page .product-show-right #attach_area .dropdown-menu.show { padding-left: 20px; padding-right: 20px; } #product-show-page .product-show-right #attach_area .dropdown-menu.show .show_area { margin-bottom: 5px; } #product-show-page .product-show-right #attach_area .dropdown-menu.show .svg-inline--fa { width: 1.125em; } #product-show-page .product-show-right #attach_area .dropdown-menu.show a { color: #222222; transition: all 0.2s; } #product-show-page .product-show-right #attach_area .dropdown-menu.show a:hover { color: #C41F28; } .layout_title_wrap.layoutNameCarLeafBox { display: none; } .nameLayoutWrap.layoutNameCarLeafLayoutWrap { padding: 0; } .messageNameBox .title_wrap .item .title { font-size: clamp(26px, 2.5vw, 48px); color: #070707; line-height: 1; font-weight: 600; white-space: nowrap; position: relative; padding-left: 1.5625vw; padding-right: 1.5625vw; margin-bottom: 3.385vw; } .messageNameBox .title_wrap .item .title::before { content: ""; position: absolute; left: -1.823vw; left: 0; bottom: 0; background-image: url(/images/project/176/title_icon.png); background-repeat: no-repeat; background-size: contain; width: 59px; height: 74px; width: max(3.073vw, 22px); height: max(3.854vw, 29px); } .messageNameBox .img_wrap .item .img { max-width: 20.833vw; } .messageNameBox .img_wrap .item .img img { max-width: 100%; } .messageNameBox .txt_wrap .item .title { font-size: clamp(20px, 1.875vw, 36px); font-weight: 600; color: #174272; margin-bottom: 1.042vw; } .messageNameBox .txt_wrap .item .summary { color: #070707; font-size: clamp(15px, 1.042vw, 20px); margin-bottom: 1.5625vw; } .messageNameBox .txt_wrap .item .msg_description { font-size: clamp(16px, 0.833vw, 16px); color: #4D4D4D; } #finance_show_page .table.table-striped tr td { padding: 1.042vw; font-size: clamp(16px, 0.833vw, 16px); font-weight: 600; color: #070707; } #finance_show_page .table.table-striped thead { border: none; background: transparent; position: relative; margin-bottom: 1.042vw; display: flex; width: 100%; } #finance_show_page .table.table-striped thead::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #174272; border-radius: max(0.521vw, 5px); z-index: -1; } #finance_show_page .table.table-striped thead tr { border: none; display: flex; align-items: stretch; width: 100%; } #finance_show_page .table.table-striped thead th { padding: 1.042vw; font-size: clamp(16px, 0.833vw, 16px); font-weight: 600; color: #ffffff; text-align: left; border: none; width: 100%; } #finance_show_page .table.table-striped tbody { display: flex; flex-direction: column; } #finance_show_page .table.table-striped tbody tr { display: flex; width: 100%; position: relative; } #finance_show_page .table.table-striped tbody tr:nth-of-type(odd) { background: transparent; } #finance_show_page .table.table-striped tbody tr:nth-of-type(odd)::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: max(0.521vw, 5px); z-index: -1; background: linear-gradient(115deg, rgba(208, 225, 234, 0.4), rgba(134, 171, 188, 0.3)), rgba(255, 255, 255, 0.9); } #finance_show_page .table.table-striped tbody tr:nth-child(2n) td:nth-child(1) .txt_item .icon::before { background-image: url("/images/project/176/esg_icon02.png"); } #finance_show_page .table.table-striped tbody tr:nth-child(3n) td:nth-child(1) .txt_item .icon::before { background-image: url("/images/project/176/esg_icon03.png"); } #finance_show_page .table.table-striped tbody tr:nth-child(4n) td:nth-child(1) .txt_item .icon::before { background-image: url("/images/project/176/esg_icon04.png"); } #finance_show_page .table.table-striped tbody tr td { border: none; display: flex; width: 100%; } #finance_show_page .table.table-striped tbody tr td:nth-child(1) .txt_item .icon { display: flex; } #finance_show_page .table.table-striped tbody tr td:nth-child(1) .txt_item .icon::before { content: ""; position: absolute; background-image: url("/images/project/176/esg_icon01.png"); width: 18px; height: 23px; width: max(0.9375vw, 12px); height: max(1.198vw, 15px); background-position: center center; background-repeat: no-repeat; background-size: cover; top: 50%; left: 50%; transform: translate(-50%, -50%); } #finance_show_page .table.table-striped tbody tr td:nth-child(2) { align-items: center; } #finance_show_page .table.table-striped tbody tr td .txt_item { display: flex; align-items: center; } #finance_show_page .table.table-striped tbody tr td .txt_item .icon { width: max(2.604vw, 30px); min-width: max(2.604vw, 30px); height: max(2.604vw, 30px); display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: #FFFFFF; margin-right: 0.78125vw; position: relative; display: none; } .FullPageShowBox { padding-left: 0; padding-right: 0; } .FullPageShowBox #aboutus_show_page > .container { max-width: 100%; padding: 0; } .FullPageShowBox #aboutus_show_page > .container #main_title { display: none; } .FullPageShowBox #aboutus_show_page > .container .aboutus_content > br { display: none; } .FullPageShowBox #aboutus_show_page > .container #inner_btnarea { display: none; } .FullPageBox { background-color: #F3F8FD; background-image: url("/images/project/176/about_show_bg.png"); background-repeat: no-repeat; background-size: contain; background-position: bottom center; } .FullPageBox .layout_title_wrap.breadcrumbWrap .item { margin-bottom: 0; } .OnePageBox .title_wrap .item .title { font-size: clamp(26px, 4.167vw, 80px); font-size: clamp(26px, 2.5vw, 48px); color: #070707; line-height: 1; font-weight: 600; white-space: nowrap; position: relative; } .OnePageBox .title_wrap .item .title::before { content: ""; position: absolute; left: -1.823vw; top: -1.5625vw; background-image: url("/images/project/176/title_icon.png"); background-repeat: no-repeat; background-size: contain; width: 59px; height: 74px; width: max(3.073vw, 22px); height: max(3.854vw, 29px); } .OnePageBox .title_wrap .item .title.animated span { -webkit-animation: leftIn 1s both; animation: leftIn 1s both; } .OnePageBox .title_wrap .item .subTitle { color: #174272; font-size: clamp(16px, 1.25vw, 24px); font-weight: 600; line-height: 1.2; } .OnePageBox .txt_wrap .item .subTitle { color: #174272; font-size: clamp(16px, 1.25vw, 24px); font-weight: 600; line-height: 1.2; } .OnePageBox .txt_wrap .item .txt { font-size: clamp(16px, 1.5vw, 18px); font-size: clamp(16px, 1.5vw, 18px); font-size: 18px; color: #4D4D4D; line-height: 1.5; } .OnePageBox .img_wrap .item .img img { max-width: 100%; } .AboutUsShowBox .section1 { position: relative; margin-bottom: 3.646vw; } .AboutUsShowBox .section1 .img_wrap { padding-left: 0; padding: 0; } .AboutUsShowBox .section1 .title_wrap { padding-left: 15px; padding-right: 15px; } .AboutUsShowBox .section1 .title_wrap .item { padding-top: 5.46875vw; padding-left: 3.385vw; } .AboutUsShowBox .section1 .title_wrap .item .subTitle { margin-bottom: 1.302vw; } .AboutUsShowBox .section1 .title_wrap .item .txt { margin-bottom: 1.302vw; } .AboutUsShowBox .section1 .title_wrap .item .img { display: flex; align-items: center; justify-content: flex-end; } .AboutUsShowBox .section1 .title_wrap .item .img img { max-width: 11.719vw; } .AboutUsShowBox .section2 .about-show-tabs .nav { background-color: #ffffff; border-radius: max(2.604vw, 25px); padding: 0.521vw; display: flex; align-items: center; justify-content: center; border: none; margin-bottom: 4.948vw; } .AboutUsShowBox .section2 .about-show-tabs .nav .nav-item { width: 50%; } .AboutUsShowBox .section2 .about-show-tabs .nav .nav-item .nav-link { color: #174272; font-weight: 600; transition: all 0.3s; font-size: clamp(16px, 1.25vw, 24px); text-align: center; padding: 0.78125vw; margin: 0; border-radius: 50px; border-radius: max(2.604vw, 25px); border: none; } .AboutUsShowBox .section2 .about-show-tabs .nav .nav-item .nav-link.active { background-color: #174272; color: #ffffff; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_nav { display: none !important; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .txt_item { display: flex; align-items: stretch; margin-bottom: 3.125vw; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .txt_item .subTitle { width: 25vw; min-width: 25vw; padding-right: 1.5625vw; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .txt_item .txt .insItem { margin-top: 20px; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .txt_item .txt .insItem .img_wrap { padding: 0; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .txt_item .txt .insItem .img_wrap .item .img img { width: 100%; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .txt_item .txt .insItem .txt_wrap { background-color: #ffffff; display: flex; align-items: center; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .txt_item .txt .insItem .txt_wrap .item { padding: 30px 15px; display: flex; align-items: center; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .txt_item .txt .insItem .txt_wrap .item ul li { margin-bottom: 10px; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item { display: flex; align-items: stretch; margin: 0 -10px; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item.img_item2 .insItem.active { width: 125%; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem { width: 60%; padding: 0 10px; position: relative; transition: all 0.3s; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem:hover { cursor: pointer; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem.active { width: 100%; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem.active .insItemIns .img .icon img { transform: scale(-1); } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem.active .insItemIns .img::before { opacity: 0; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem.active .insItemIns .txt_item { background-color: rgba(255, 255, 255, 0.85); top: 0.521vw; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem.active .insItemIns .txt_item .subTitle { color: #070707; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem.active .insItemIns .txt_item .txt { opacity: 1; display: block; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem .insItemIns { padding: 0.521vw; border: 1px solid #ffffff; border-radius: max(1.5625vw, 15px); position: relative; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem .img { position: relative; border-radius: max(1.5625vw, 15px); overflow: hidden; height: 510px; height: 655px; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem .img img { -o-object-fit: cover; object-fit: cover; height: 100%; width: 100%; -o-object-position: center center; object-position: center center; transition: all 0.3s; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem .img::before { content: ""; position: absolute; bottom: 0; left: 0; right: 0; top: 0; background: linear-gradient(180deg, rgba(23, 65, 114, 0), rgba(23, 65, 114, 0.7)); transition: all 0.3s; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem .img .icon { width: max(2.604vw, 25px); height: max(2.604vw, 25px); background-color: #AFD6F3; border-radius: 50%; display: flex; align-items: center; justify-content: center; position: absolute; top: 2.083vw; left: 2.083vw; z-index: 9; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem .img .icon img { width: 14px; height: 25px; width: max(0.729vw, 8.5px); height: max(1.302vw, 15px); } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem .txt_item { position: absolute; bottom: 0.521vw; left: 0.521vw; right: 0.521vw; flex-direction: column; justify-content: center; padding: 2.604vw 1.5625vw; margin: 0; border-radius: max(1.5625vw, 15px); } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem .txt_item .icon { display: none; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem .txt_item .subTitle { font-size: clamp(20px, 1.875vw, 36px); color: #ffffff; width: 100%; padding: 0; min-width: auto; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem .txt_item .txt { display: none; opacity: 0; transition: all 0.3s; margin-top: 1.823vw; } @media (max-width: 767px) { #news_cate_page > .container { padding: 0; } #news_cate_page .strip_img_item { border-bottom: 1px solid #efefef; padding-bottom: 15px; } #news_cate_page .strip_cate_content .strip_cate_summary { -webkit-line-clamp: 11 !important; } #news_cate_page .strip_cate_content #inner_btnarea { display: none; } #aboutus_show_page > .container, #news_show_page > .container, #product_cate_page > .container, #product_list_page > .container, #product-show-page > .container, #message_cate_page > .container, #message_show_page > .container, #download_list_page > .container { padding: 0; } #message_show_page .message_content > .container { padding: 0; } #download_list_page .item_content { padding: 0; } #download_list_page .item_content .download_data_area .file_download_btn .btn { white-space: normal; text-align: left; } #download_list_page .files table { border: 1px solid #ddd; } #download_list_page .files table td { padding-left: 0; padding-right: 0; } #download_list_page .files table td.file_title { padding-left: 12px; } #react_main > .container, #react_main #mwebApp > .container { padding: 0; } } @media (max-width: 991px) { .breadcrumbWrap #bread_area .breadcrumb { padding-left: 15px !important; padding-right: 15px !important; } .layoutWrap { padding-left: 30px; padding-right: 30px; } .layoutWrap.FullPageShowBox { padding-left: 0px; padding-right: 0px; } .layoutWrap.productLayoutWrap { border-top: 1px solid #55B1E7; padding-left: 15px; padding-right: 15px; } .layoutWrap.isProductMainWrap { border-top: none; padding-left: 15px; padding-right: 15px; } .layoutWrap.isProductLeafWrap { border-top: none; padding-left: 15px; padding-right: 15px; } .layoutWrap.NewsLayoutWrap { border-top: none; padding-left: 15px; padding-right: 15px; } .layout_title_wrap { padding: 0 30px; } .sideMenuWrap { display: none !important; } .cdme_menu_wrap { padding: 0 30px; } .ProductMainLayoutBox .layoutWrap { padding-left: 15px; padding-right: 15px; } #list_strip .newsList_wrap .year_item { padding-left: 30px; } #list_strip .newsList_wrap .newsListInsItem { padding-right: 30px; } #list_grid_v2.cdmo_grid .grid_v2_item:nth-child(odd) .grid_v2_content .txt_wrap .item { padding-left: 30px; } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .img_wrap .item { padding-left: 0 !important; padding-right: 0 !important; } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .img_wrap .item .img { height: 30vw; } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .txt_wrap .item { padding-right: 30px; } #list_grid_v2.ProductMainGrid .grid_v2_item .grid_v2_content .grid_v2_info .grid_v2_title a { padding: 10px 0; } #product-show-page .product-show-left .big-img-block:not(.small-img-block) { max-height: 32vw; } #product-show-page .product-show-left .small-img-block:not(.big-img-block) { max-height: 6.5vw; } #product-show-page .product-show-left .sub-carousel .slick-list { height: 32vw !important; } .AboutUsShowBox .section1 .title_wrap { padding-right: 30px; } .AboutUsShowBox .section2 { padding-left: 15px; padding-right: 15px; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .txt_item { flex-wrap: wrap; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .txt_item .subTitle { width: 100%; padding-right: 0; margin-bottom: 15px; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .txt_item .txt { width: 100%; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .txt_item .txt .insItem { margin: 0; margin-top: 20px; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item { flex-direction: column; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem { width: 100% !important; margin-bottom: 10px; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem .insItemIns { padding: 0; border: none; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem .txt_item { position: initial; padding: 15px 0; background: transparent !important; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem .txt_item .subTitle { color: #070707; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem .txt_item .txt { opacity: 1; display: block; margin-top: 0; } .nameLayoutWrap.layoutNameCarLeafLayoutWrap { padding-left: 15px; padding-right: 15px; } .messageNameBox .img_wrap .item .img { max-width: 100%; } .layout_title_wrap .item { flex-direction: column; } .layout_title_wrap .item #main_title { min-width: 100%; margin-bottom: 15px; } } @media (max-width: 767px) { #content { padding-bottom: 160px; } .breadcrumbWrap #bread_area .breadcrumb { padding-left: 15px !important; padding-right: 15px !important; } .layoutWrap { padding-left: 30px; padding-right: 30px; } .layoutWrap.FullPageShowBox { padding-left: 0px; padding-right: 0px; } .layoutWrap.productLayoutWrap { border-top: 1px solid #55B1E7; padding-left: 15px; padding-right: 15px; } .layoutWrap.isProductMainWrap { border-top: none; padding-left: 15px; padding-right: 15px; } .layoutWrap.isProductLeafWrap { border-top: none; padding-left: 15px; padding-right: 15px; } .layoutWrap.NewsLayoutWrap { border-top: none; padding-left: 15px; padding-right: 15px; } .layout_title_wrap { padding: 0 30px; } .sideMenuWrap { display: none !important; } .cdme_menu_wrap { padding: 0 30px; } .ProductMainLayoutBox .layoutWrap { padding-left: 15px; padding-right: 15px; } #list_strip .newsList_wrap .year_item { padding-left: 30px; } #list_strip .newsList_wrap .newsListInsItem { padding-right: 30px; } #list_grid_v2.ProductMainGrid .grid_v2_item { flex: 0 0 100%; max-width: 100%; } #list_grid_v2.nameCard_grid > .row { margin: 0 -15px; } #list_grid_v2.nameCard_grid > .row .grid_v2_item { padding: 0 15px; } #list_grid_v2.cdmo_grid .grid_v2_item:nth-child(odd) .grid_v2_content .txt_wrap .item { padding-left: 30px; } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .img_wrap .item { padding-left: 0 !important; padding-right: 0 !important; } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .img_wrap .item .img { height: 30vw; } #list_grid_v2.cdmo_grid .grid_v2_item .grid_v2_content .txt_wrap .item { padding-right: 30px; } #list_grid_v2.ProductMainGrid .grid_v2_item .grid_v2_content .grid_v2_info .grid_v2_title a { padding: 10px 0; } #list_grid_v2 .grid_v2_item .grid_v2_content .grid_v2_info .grid_v2_title a { padding: 10px 0; } #product-show-page .product-show-left { display: block; margin-bottom: 20px; } #product-show-page .product-show-left .big-img-block:not(.small-img-block) { max-height: 55vw; } #product-show-page .product-show-left .small-img-block:not(.big-img-block) { max-height: 10.5vw; } #product-show-page .product-show-left .main-carousel { width: 100%; margin-bottom: 10px; } #product-show-page .product-show-left .sub-carousel { width: 100%; padding: 0; } #product-show-page .product-show-left .sub-carousel .slick-list { height: 10.5vw !important; margin: 0 -7.5px; } #product-show-page .product-show-left .sub-carousel .slick-list .slick-track .slick-slide { padding: 0 7.5px; } #detail_tab .product-show-tabs .nav-tabs .nav-item .nav-link { padding: 10px 15px; } .AboutUsShowBox .section1 .title_wrap { padding-right: 30px; } .AboutUsShowBox .section2 { padding-left: 15px; padding-right: 15px; } .AboutUsShowBox .section2 .about-show-tabs .nav { flex-wrap: wrap; padding: 5px; } .AboutUsShowBox .section2 .about-show-tabs .nav .nav-item { width: 100%; } .AboutUsShowBox .section2 .about-show-tabs .nav .nav-item .nav-link { padding: 10px; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .txt_item { flex-wrap: wrap; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .txt_item .subTitle { width: 100%; padding-right: 0; margin-bottom: 15px; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .txt_item .txt { width: 100%; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item { flex-direction: column; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem { width: 100% !important; margin-bottom: 10px; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem .insItemIns { padding: 0; border: none; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem .txt_item { position: initial; padding: 15px 0; background: transparent !important; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem .txt_item .subTitle { color: #070707; } .AboutUsShowBox .section2 .about-show-tabs .tab-content .img_item .insItem .txt_item .txt { opacity: 1; display: block; margin-top: 0; } .messageNameBox .title_wrap .item .title { margin-bottom: 30px; } .messageNameBox .img_wrap { margin-bottom: 30px; } .messageNameBox .img_wrap .item .img { max-width: 100%; display: flex; align-items: center; justify-content: center; } .cdme_menu_wrap { display: none !important; } #detail_tab .tab-content { padding: 15px; } } .pagination.pagination_obj { display: flex; justify-content: center !important; list-style: none; padding: 0; margin: 0; margin-top: 2.604vw; } .pagination.pagination_obj .page-item.active .page-link { background-color: transparent; color: #55B1E7; border: 1px solid #55B1E7; } .pagination.pagination_obj .page-item .page-link { width: max(2.34375vw, 30px); height: max(2.34375vw, 30px); color: #888888; background: transparent; font-size: clamp(16px, 0.833vw, 16px); border-radius: 50%; margin: 0 0.521vw; border: none; display: flex; align-items: center; justify-content: center; } .FacilitiesAndCapacities.FacilitiesAndCapacitiesIns .sideMenuWrap { display: block !important; } .FacilitiesAndCapacities.FacilitiesAndCapacitiesIns .layoutWrap { display: block !important; } .FacilitiesAndCapacities #list_strip { display: none !important; } .FacilitiesAndCapacities .layout_title_wrap .item { flex-direction: column; } .FacilitiesAndCapacities .layout_title_wrap .item #main_title { width: 100%; min-width: 100%; margin-bottom: 40px; } .FacilitiesAndCapacities .layout_title_wrap .item .cate_summary { font-size: 16px; font-weight: 400; line-height: normal; color: #222222; } .FacilitiesAndCapacities .layout_title_wrap .item .cate_summary p { margin-bottom: 10px; } .FacilitiesAndCapacities .sideMenuWrap { display: none !important; } .FacilitiesAndCapacities .layoutWrap { display: none !important; }